CSS SELECTORS
contents
- CSS selectors
- Pseudo selectors
- Combinators
TYPE SELECTORS
Also known as an element, tag selector. It selects an HTML tag/element in your document.
UNIVERSAL SELECTOR
It is indicated by an asterisk (*). This selects everything in the document or inside the parent element if it is being channeled together with another element and a descendant combinator.
CLASS SELECTOR
The class selector starts with a dot(.) character. It will select everything in the document with that class applied to it.
ID SELECTOR
An id selector starts with a # rather than a dot but is used in the same way as a class selector, However, an id can be used only once per page and an element can have only a single value applied to it
ATTRIBUTE SELECTOR
Elements can have attributes that give further details about the element being marked up. In CSS we can use attribute selectors to target elements with a certain attribute.
PRESENCE AND VALUE SELECTOR
These selectors enable the selectors of an element based on the presence of an attribute alone.
SUBSTRING MATCHING SELECTORS
These selectors allow you for more advanced matching of substrings inside the value of your attribute. For example, if you had a class of box warning and box error and wanted to match everything that started with string ‘box’ you could use [class^=box] to select them both or [class|=’ box’]
example
.Li[class^=’a’] matches any attribute that starts with a.
.Li[class$=a] matches any attribute that ends with a.
.Li[class*=a] matches any attribute value where a appears.
PSEUDO CLASS AND PSEUDO ELEMENTS
The next selector we will look into is pseudo classes and elements. There are large numbers of them and often serve a specific purpose. A pseudo-class is a selector that selects elements that are in a specific state eg they are the first element of their type or they are being hovered over by the mouse. They act as if you have applied some class to the document often helping you cut down on creating extra classes in your markup and giving you more flexible and maintainable code.
SIMPLE PSEUDO-CLASS EXAMPLE
If we wanted to make the first paragraph in an article larger and bold we could use add a class to that paragraph and add CSS to that class. However, this could be annoying. What if a new paragraph got added to the top of the document? We have to move the class over to the new paragraph. Instead of adding a class, we could use the pseudo-class ‘: first-child this will always target the first child element in the article.
article p:first-class{
font size:' ':
font weight:bold;
}
<article>
<p> lorem ipsum </p>
</article> /* you can try this code */All pseudo-class behaves in the same way. They target some bit of document in a certain state behaving as if we have added some class into HTML.
: invalid
This pseudo-class represents any <form> <fieldset> <input> or their <form> element whose contents fail to validate.
RADIO BUTTON
If any of the radio buttons in a group is required the: input pseudo-class is applied to all of them if none of the buttons in the group is selected.
<head></head>
<body>
<form>
<fieldset>
<label for= "form name">Name</label><br>
<input type="text" name="name" id="form name" required>
</fieldset>
<fieldset>
<label for "form email">email</label><br>
<input type="text" name="email" id="form email" required>
</fieldset>
<fieldset>
label for "form message">Message</label>
<text area name="message" id="form message" required></text area>
</fieldset>
<button type="submit" name="send">submit</button>
</form>
/* Hide the fieldset afrter an invalid fieldset */
fieldset:invalid~fieldset {
display:one;
}
/* Dim and disable the buton when the form is invalid */
form:invalid button{
opacity:0.3;
pointer events:none;
}
input textarea {
box sizing:border box;
width:100%;
font family: monospace;
padding: 0.253m 0.5em;
}
button {
width:100%
border: thin solid darkgrey;
font size:1.25em;
background-color:green;
color:white;
}USER ACTION PSEUDO-CLASS
Some pseudo-classes only apply when the user interacts with the document in some way. These user action pseudo-classes sometimes referred to as dynamic pseudo-classes act as if a class has been added to the element when the users interact with it:-
: hover
As mentioned above this only applies if the user moves their pointer over an element, typically a link.
: focus
This only applies if the user focuses on the element by clicking or using keyboard controls.
a:link
a:visited {
color: purple;
font-weight: bold;
}
a:hover{
color:hot pink;
}PSEUDO-ELEMENT
Pseudo elements behave in a similar way. However, they act as if you have added a whole new HTML element into the markup rather than applyimg a class to existing elements. Pseudo elements start with :: colon.
Get Biswas chhetri’s stories in your inbox
Join Medium for free to get updates from this writer.
For example if you wanted to select the first line of the paragraph you could wrap it with a <span> element and then add a selector to it however that would fail if the number of words you have wrapped were no longer or shorter then the present element width. As we tend to know how many words will fit on a line as that will change if the screen width or font size changes it is impossible to robustly do this by adding HTML.
The ::first-line pseudo element will do this for us reliably. If the number of words increases or decreases it will select only the first line.
article p::first-line {
font-size:120%;
font-weight:bold;
}<head></head>
<body>
<article>
<p> Pseudo elements behave in a similar way. However, they act as if you have added a whole new HTML element into the markup rather than applyimg a class to existing elements. Pseudo elements start with colon. </p>
</article>
</body>It acts as if <span> was magically wrapped around that first formatted line and updated each time the line was changed.
COMBINING PSEUDO CLASSES AND PSEUDO ELEMENTS
If we wanted to make the first line of the first paragraph bold we can chain the :first-line and :first-child selectors together. [We are saying that we want to select the first line of first <p> element which is inside of the <article> element,
article p:first-child::first-line {
font size:120%;
font-weight:bold;
}GENERATING CONTENT WITH ::BEFORE AND ::AFTER
These are a couple of special pseudo elements which are used along the content property to insert content into the document using CSS. We could use this to insert a string of text.
.box::before {
content: I am from India;
}<head> </head>
<body>
<p class="box" Content in the box is my HTML page</p>Inserting strings of text from CSS ism’t really something we do very often on the web however as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future. A more valid use of these elements is to insert an icon. For example we can add an arrow which is a visual indicator which we wouldn’t want to read out by the screen reader.
These elements are frequently used to insert an empty string which we can style just like any element in the page.
.box::before {
content:' ';
display:block;
width:100px;
height:100px;
background-color: green;
border: 1px solidblack;
}The use of the ::before and ::after pseudo elements along with the content property is known as Generated Content.
How to target classes?
This example inserts additional text after special items in a list:-
<head> </head>
<body>
<h2>Darjeeling best sellers</h2>
<ol>
<li>Inner engineering</li>
<li class="new entry"> Death </li>
<li>Sadhguru more than a life </li>
<li class="new entry"> Flowering</li>.new entry::after {
content: New!;
color:red;
}
/* The leading space creates separate between the added content and rest of the content*/COMBINATOR
The final selector we will look at is the combinators because they combine other selectors in a way that gives them a useful relationship to each other and location of content in the document.
Descendant combinators:
Typically represented by the single space(“ “) character combines two selectors such that elements matched by the second selector are selected if the have an ancestor( parent, parents parent, parents parents parent, etc) element matching the first selector. Selector that utilize a descendant combinator are called descendant selectors.
<div class="box"><p> text in the box </p> </div>
<p> Text not in the box </p>.box {
color:red;
}CHILD COMBINATOR
The child combinator (>) is placed between the two CSS selectors. It matches only those elements matched by the second selector that are the direct children of the elements matched by the first. For example to select only <p> elements that are direct children of <article> elements :article>p
<ul> <li> unordered item </li>
<li> unordered item
<ol>
<li>Item1</li>
<li>Item2</li>
</ol>
</li>
</ul>ul > li {
border top: 5px solid red;
}Here we have unordered list nested inside ordered list. The child combinator selects only those <li> elements which are direct children of <ul> and styles them with top border. If we remove > that designates this as a child combinator, you end up with descendant selector and all the <li> elements will get red border.
ADJACENT SIBLING COMBINATOR
The adjacent sibling selector (+) is placed between two CSS selectors. It matches only those elements matched by the second selector that is the next sibling element of the first selector. For example to select all <img> elements that are immediately preceded by an <p> element.
<article> <h1>A heading<h1>
<p> My name is Biswash chhetri</p>
<p> I am from Darjeeling </p>
</article>h1+p {
font weight:bold;
background-color: #333;
color: #fff;
padding: .5em;
}A common case is to do something with the paragraph that follows a heading. In this example we are looking for any paragraph which shares a parent element with an <h1>, and immediately follows that <h1>. If we insert some element as <h2> in between the <h1> and the <p> we will find that paragraph is no longer matched by the selector.
GENERAL SIBLING COMBINATOR
If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~) to select all image elements that come anywhere after <p> element we would do this :
p ~ image
<aricle> <h1> A heading <?h1>
<p> I am a Paragraph </p>
<div> I am a div </div>
<p> I am another paragraph </p>
</article>h1 ~ p {
font weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}In this example we are selecting all <p> elements that come after h1 even though there is a <div> in the document as well the <p> that comes after it is selected.
USING COMBINATORS
We can select any of the selectors that we discovered with combinators in order to pick out part of the document. For example to select list items with a class of “a” which are direct children of <ul> try:
ul > li[class=”a”] {
}It is often better to create a class and apply that to the element in question. That said your knowledge of combinators will be useful if you need to style something in your document and are unable to access the HTML perhaps due to it being generated by a CMS ( Content Management System). It is a software that allows to publish, organize, change, or removal of various kinds of content not only text but also embed images, videos, audio and interactive codes.
(These are most of the selectors and combinator whichare useful)
