Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.
Selector | Example | Example description |
---|---|---|
.class | .intro | Selects all elements with class=”intro” |
.class1.class2 | .name1.name2 | Selects all elements with both name1 and name2 set within its class attribute |
.class1 .class2 | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
#id | #firstname | Selects the element with id=”firstname” |
* | * | Selects all elements |
element | p | Selects all <p> elements |
element.class | p.intro | Selects all <p> elements with class=”intro” |
element,element | div, p | Selects all <div> elements and all <p> elements |
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects all <p> elements that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |
[attribute] | [target] | Selects all elements with a target attribute |
[attribute=value] | [target=_blank] | Selects all elements with target=”_blank” |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word “flower” |
[attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with “en” |
[attribute^=value] | a[href^=”https”] | Selects every <a> element whose href attribute value begins with “https” |
[attribute$=value] | a[href$=”.pdf”] | Selects every <a> element whose href attribute value ends with “.pdf” |
[attribute*=value] | a[href*=”w3schools”] | Selects every <a> element whose href attribute value contains the substring “w3schools” |
:active | a:active | Selects the active link |
::after | p::after | Insert something after the content of each <p> element |
::before | p::before | Insert something before the content of each <p> element |
:checked | input:checked | Selects every checked <input> element |
:default | input:default | Selects the default <input> element |
:disabled | input:disabled | Selects every disabled <input> element |
:empty | p:empty | Selects every <p> element that has no children (including text nodes) |
:enabled | input:enabled | Selects every enabled <input> element |
:first-child | p:first-child | Selects every <p> element that is the first child of its parent |
::first-letter | p::first-letter | Selects the first letter of every <p> element |
::first-line | p::first-line | Selects the first line of every <p> element |
:first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
:focus | input:focus | Selects the input element which has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects input elements with a value within a specified range |
:indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
:invalid | input:invalid | Selects all input elements with an invalid value |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to “it” (Italian) |
:last-child | p:last-child | Selects every <p> element that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a <p> element |
:nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
:only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
:only-child | p:only-child | Selects every <p> element that is the only child of its parent |
:optional | input:optional | Selects input elements with no “required” attribute |
:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
::placeholder | input::placeholder | Selects input elements with the “placeholder” attribute specified |
:read-only | input:read-only | Selects input elements with the “readonly” attribute specified |
:read-write | input:read-write | Selects input elements with the “readonly” attribute NOT specified |
:required | input:required | Selects input elements with the “required” attribute specified |
:root | :root | Selects the document’s root element |
::selection | ::selection | Selects the portion of an element that is selected by a user |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all input elements with a valid value |
:visited | a:visited | Selects all visited links |
Common Selectors
Before diving too deep into some of the more complex selectors, and those offered within CSS3, let’s take a quick look at some of the more common selectors seen today. These selectors include the type, class, and ID selectors.
The type selector identifies an element based on its type, specifically how that element is declared within HTML. The class selector identifies an element based on its class attribute value, which may be reused on multiple elements as necessary to help share popular styles. Lastly, the ID selector identifies an element based on its ID attribute value, which is unique and should only be used once per page.
CSS
h1 {...}
.tagline {...}
#intro {...}
HTML
<section id="intro">
<h1>...</h1>
<h2 class="tagline">...</h2>
</section>
Common Selectors Overview
Example | Classification | Explanation |
---|---|---|
h1 | Type Selector | Selects an element by its type |
.tagline | Class Selector | Selects an element by the class attribute value, which may be reused multiple times per page |
#intro | ID Selector | Selects an element by the ID attribute value, which is unique and to only be used once per page |
Child Selectors
Child selectors provide a way to select elements that fall within one another, thus making them children of their parent element. These selections can be made two different ways, using either descendant or direct child selectors.
Descendant Selector
The most common child selector is the descendant selector, which matches every element that follows an identified ancestor. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.
The article h2
selector is a descendant selector, only selecting h2
elements that fall inside of an article
element. Notice, no matter where a h2
element lives, so long as it is within the article
element, it will always be selected. Additionally, any h2
element outside of the article
element is not selected.
Below, the headings on lines 3 and 5 are selected.
CSS
article h2 {...}
HTML
<h2>...</h2>
<article>
<h2>This heading will be selected</h2>
<div>
<h2>This heading will be selected</h2>
</div>
</article>
Direct Child Selector
Sometimes descendant selectors go a bit overboard, selecting more than hoped. At times only the direct children of a parent element need to be selected, not every instance of the element nested deeply inside of an ancestor. In this event the direct child selector may be used by placing a greater than sign, >
, between the parent element and child element within the selector.
For example, article > p
is a direct child selector only identifying p
elements that fall directly within an article
element. Any p
element placed outside of an article
element, or nested inside of another element other than the article
element, will not be selected.
Below, the paragraph on line 3 is the only direct child of its parent article, thus selected.
CSS
article > p {...}
HTML
<p>...</p>
<article>
<p>This paragraph will be selected</p>
<div>
<p>...</p>
</div>
</article>
Child Selectors Overview
Example | Classification | Explanation |
---|---|---|
article h2 | Descendant Selector | Selects an element that resides anywhere within an identified ancestor element |
article > p | Direct Child Selector | Selects an element that resides immediately inside an identified parent element |
Sibling Selectors
Knowing how to select children of an element is largely beneficial, and quite commonly seen. However sibling elements, those elements that share a common parent, may also need to be selected. These sibling selections can be made by way of the general sibling and adjacent sibling selectors.
General Sibling Selector
The general sibling selector allow elements to be selected based on their sibling elements, those which share the same common parent. They are created by using the tilde character, ~
, between two elements within a selector. The first element identifies what the second element shall be a sibling with, and both of which must share the same parent.
The h2 ~ p
selector is a general sibling selector that looks for p
elements that follow, and share the same parent, of any h2
elements. In order for a p
element to be selected it must come after any h2
element.
The paragraphs on lines 5 and 9 are selected as they come after the heading within the document tree and share the same parent as their sibling heading.
CSS
h2 ~ p {...}
HTML
<p>...</p>
<section>
<p>...</p>
<h2>...</h2>
<p>This paragraph will be selected</p>
<div>
<p>...</p>
</div>
<p>This paragraph will be selected</p>
</section>
Adjacent Sibling Selector
Occasionally a little more control may be desired, including the ability to select a sibling element that directly follows after another sibling element, which is where the adjacent sibling element comes in. The adjacent sibling selector will only select sibling elements directly following after another sibling element. Instead of using the tilde character, as with general sibling selectors, the adjacent sibling selector uses a plus character, +
, between the two elements within a selector. Again, the first element identifies what the second element shall directly follow after and be a sibling with, and both of which must share the same parent.
Looking at the adjacent sibling selector h2 + p
only p
elements directly following after h2
elements will be selected. Both of which must also share the same parent element.
The paragraph on line 5 is selected as it directly follows after its sibling heading along with sharing the same parent element, thus selected.
CSS
h2 + p {...}
HTML
<p>...</p>
<section>
<p>...</p>
<h2>...</h2>
<p>This paragraph will be selected</p>
<div>
<p>...</p>
</div>
<p>...</p>
</section>
Sibling Selectors Example
HTML
<input type="checkbox" id="toggle">
<label for="toggle">☰</label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS
input {
display: none;
}
label,
ul {
border: 1px solid #cecfd5;
border-radius: 6px;
}
label {
color: #0087cc;
cursor: pointer;
display: inline-block;
font-size: 18px;
padding: 5px 9px;
transition: all .15s ease;
}
label:hover {
color: #ff7b29;
}
input:checked + label {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
color: #9799a7;
}
nav {
max-height: 0;
overflow: hidden;
transition: all .15s ease;
}
input:checked ~ nav {
max-height: 500px;
}
ul {
list-style: none;
margin: 8px 0 0 0;
padding: 0;
width: 100px;
}
li {
border-bottom: 1px solid #cecfd5;
}
li:last-child {
border-bottom: 0;
}
a {
color: #0087cc;
display: block;
padding: 6px 12px;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
Demo
Sibling Selectors Overview
Example | Classification | Explanation |
---|---|---|
h2 ~ p | General Sibling Selector | Selects an element that follows anywhere after the prior element, in which both elements share the same parent |
h2 + p | Adjacent Sibling Selector | Selects an element that follows directly after the prior element, in which both elements share the same parent |
Attribute Selectors
Some of the common selectors looked at early may also be defined as attribute selectors, in which an element is selected based upon its class or ID value. These class and ID attribute selectors are widely used and extremely powerful but only the beginning. Other attribute selectors have emerged over the years, specifically taking a large leap forward with CSS3. Now elements can be selected based on whether an attribute is present and what its value may contain.
Attribute Present Selector
The first attribute selector identifies an element based on whether it includes an attribute or not, regardless of any actual value. To select an element based on if an attribute is present or not, include the attribute name in square brackets, []
, within a selector. The square brackets may or may not follow any qualifier such as an element type or class, all depending on the level of specificity desired.
CSS
a[target] {...}
HTML
<a href="#" target="_blank">...</a>
Attribute Equals Selector
To identify an element with a specific, and exact matching, attribute value the same selector from before may be used, however this time inside of the square brackets following the attribute name, include the desired matching value. Inside the square brackets should be the attribute name followed by an equals sign, =
, quotations, ""
, and inside of the quotations should be the desired matching attribute value.
CSS
a[href="http://google.com/"] {...}
HTML
<a href="http://google.com/">...</a>
Attribute Contains Selector
When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *
, may be used within the square brackets of a selector. The asterisk should fall just after the attribute name, directly before the equals sign. Doing so denotes that the value to follow only needs to appear, or be contained, within the attribute value.
CSS
a[href*="login"] {...}
HTML
<a href="/login.php">...</a>
Attribute Begins With Selector
In addition to selecting an element based on if an attribute value contains a stated value, it is also possible to select an element based on what an attribute value begins with. Using a circumflex accent, ^
, within the square brackets of a selector between the attribute name and equals sign denotes that the attribute value should begin with the stated value.
CSS
a[href^="https://"] {...}
HTML
<a href="https://chase.com/">...</a>
Attribute Ends With Selector
Opposite of the begins with selector, there is also an ends with attribute selector. Instead of using the circumflex accent, the ends with attribute selector uses the dollar sign, $
, within the square brackets of a selector between the attribute name and equals sign. Using the dollar sign denotes that the attribute value needs to end with the stated value.
CSS
a[href$=".pdf"] {...}
HTML
<a href="/docs/menu.pdf">...</a>
Attribute Spaced Selector
At times attribute values may be spaced apart, in which only one of the words needs to be matched in order to make a selection. In this event using the tilde character, ~
, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value.
CSS
1
2a[rel~="tag"] {...}
HTML
<a href="#" rel="tag nofollow">...</a>
Attribute Hyphenated Selector
When an attribute value is hyphen-separated, rather than whitespace-separated, the vertical line character, |
, may be used within the square brackets of a selector between the attribute name and equals sign. The vertical line denotes that the attribute value may be hyphen-separated however the hyphen-separated words must begin with the stated value.
CSS
a[lang|="en"] {...}
HTML
<a href="#" lang="en-US">...</a>
Attribute Selectors Example
HTML
<ul>
<li><a href="#.pdf">PDF Document</a></li>
<li><a href="#.doc">Word Document</a></li>
<li><a href="#.jpg">Image File</a></li>
<li><a href="#.mp3">Audio File</a></li>
<li><a href="#.mp4">Video File</a></li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
background-position: 0 50%;
background-repeat: no-repeat;
color: #0087cc;
padding-left: 22px;
text-decoration: none;
}
a:hover {
color: #ff7b29;
}
a[href$=".pdf"] {
background-image: url("images/pdf.png");
}
a[href$=".doc"] {
background-image: url("images/doc.png");
}
a[href$=".jpg"] {
background-image: url("images/image.png");
}
a[href$=".mp3"] {
background-image: url("images/audio.png");
}
a[href$=".mp4"] {
background-image: url("images/video.png");
}
Demo
Attribute Selectors Overview
Example | Classification | Explanation |
---|---|---|
a[target] | Attribute Present Selector | Selects an element if the given attribute is present |
a[href="http://google.com/"] | Attribute Equals Selector | Selects an element if the given attribute value exactly matches the value stated |
a[href*="login"] | Attribute Contains Selector | Selects an element if the given attribute value contains at least once instance of the value stated |
a[href^="https://"] | Attribute Begins With Selector | Selects an element if the given attribute value begins with the value stated |
a[href$=".pdf"] | Attribute Ends With Selector | Selects an element if the given attribute value ends with the value stated |
a[rel~="tag"] | Attribute Spaced Selector | Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated |
a[lang|="en"] | Attribute Hyphenated Selector | Selects an element if the given attribute value is hyphen-separated and begins with the word stated |
Pseudo-classes
Pseudo-classes are similar to regular classes in HTML however they are not directly stated within the markup, instead they are dynamically populated as a result of users’ actions or the document structure. The most common pseudo-class, and one you’ve likely seen before, is :hover
. Notice how this pseudo-class begins with the colon character, :
, as will all other pseudo-classes.
Link Pseudo-classes
Some of the more basic pseudo-classes include two revolving around links specifically. The :link
and :visited
pseudo-classes define if a link has or hasn’t been visited. To style an anchor which has not been visited the :link
pseudo-class comes into play, where the :visited
pseudo-class styles links that a user has already visited based on their browsing history.
a:link {...}
a:visited {...}
User Action Pseudo-classes
Based on a users’ actions different pseudo-classes may be dynamically applied to an element, of which include the :hover
, :active
, and :focus
pseudo-classes. The :hover
pseudo-class is applied to an element when a user moves their cursor over the element, most commonly used with anchor elements. The :active
pseudo-class is applied to an element when a user engages an element, such as clicking on an element. Lastly, the :focus
pseudo-class is applied to an element when a user has made an element the focus point of the page, often by using the keyboard to tab from one element to another.
a:hover {...}
a:active {...}
a:focus {...}
User Interface State Pseudo-classes
As with the link pseudo-classes there are also some pseudo-classes generated around the user interface state of elements, particularly within form elements. These user interface element state pseudo-classes include :enabled
, :disabled
, :checked
, and :indeterminate
.
The :enabled
pseudo-class selects an input that is in the default state of enabled and available for use, where the :disabled
pseudo-class selects an input that has the disabled
attribute tied to it. Many browsers by default will fade out disabled inputs to inform users that the input is not available for interaction, however those styles may be adjusted as wished with the :disabled
pseudo-class.
input:enabled {...}
input:disabled {...}
The last two user interface element state pseudo-classes of :checked
and :indeterminate
revolve around checkbox and radio button input elements. The :checked
pseudo-class selects checkboxes or radio buttons that are, as you may expect, checked. When a checkbox or radio button has neither been selected nor unselected it lives in an indeterminate state, from which the :indeterminate
pseudo-class can be used to target these elements.
input:checked {...}
input:indeterminate {...}
Structural & Position Pseudo-classes
A handful of pseudo-classes are structural and position based, in which they are determined based off where elements reside in the document tree. These structural and position based pseudo-classes come in a few different shapes and sizes, each of which provides their own unique function. Some pseudo-classes have been around longer than others, however CSS3 brought way of an entire new set of pseudo-classes to supplement the existing ones.
:first-child, :last-child, & :only-child
The first structural and position based pseudo-classes one is likely to come across are the :first-child
, :last-child
, and :only-child
pseudo-classes. The :first-child
pseudo-class will select an element if it’s the first child within its parent, while the :last-child
pseudo-class will select an element if it’s the last element within its parent. These pseudo-classes are prefect for selecting the first or last items in a list and so forth. Additionally, the :only-child
will select an element if it is the only element within a parent. Alternately, the :only-child
pseudo-class could be written as :first-child:last-child
, however :only-child
holds a lower specificity.
Here the selector li:first-child
identifies the first list item within a list, while the selector li:last-child
identifies the last list item within a list, thus lines 2 and 10 are selected. The selector div:only-child
is looking for a division which is the single child of a parent element, without any other other siblings. In this case line 4 is selected as it is the only division within the specific list item.
CSS
li:first-child {...}
li:last-child {...}
div:only-child {...}
HTML
<ul>
<li>This list item will be selected</li>
<li>
<div>This div will be selected</div>
</li>
<li>
<div>...</div>
<div>...</div>
</li>
<li>This list item will be selected</li>
</ul>
:first-of-type, :last-of-type, & :only-of-type
Finding the first, last, and only children of a parent is pretty helpful, and often all that is needed. However sometimes you only want to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. Fortunately this is where the :first-of-type
, :last-of-type
, and :only-of-type
pseudo-selectors come into place.
The :first-of-type
pseudo-class will select the first element of its type within a parent, while the :last-of-type
pseudo-class will select the last element of its type within a parent. The :only-of-type
pseudo-class will select an element if it is the only of its type within a parent.
In the example below the p:first-of-type
and p:last-of-type
pseudo-classes select the first and last paragraphs within the article respectively, regardless if they are actually the first or last children within the article. Lines 3 and 6 are selected, reflecting these selectors. The img:only-of-type
selector identifies the image on line 5 as it is the only image to appear within the article, thus also selected.
CSS
p:first-of-type {...}
p:last-of-type {...}
img:only-of-type {...}
HTML
<article>
<h1>...</h1>
<p>This paragraph will be selected</p>
<p>...</p>
<img src="#"><!-- This image will be selected -->
<p>This paragraph will be selected</p>
<h6>...</h6>
</article>
Lastly there are a few structural and position based pseudo-classes that select elements based on a number or an algebraic expression. These pseudo-classes include :nth-child(n)
, :nth-last-child(n)
, :nth-of-type(n)
, and :nth-last-of-type(n)
. All of these unique pseudo-classes are prefixed with nth
and accept a number or expression inside of the parenthesis, indicated by the character n
argument.
The number or expression that falls within the parenthesis determines exactly what element, or elements, are to be selected. Using a number outright will count individual elements from the beginning or end of the document tree and then select one element, while using an expression will count numerous elements from the beginning or end of the document tree and select them in groups or multiples.
Using Pseudo-class Numbers & Expressions
As mentioned, using numbers outright within a pseudo-class will count from the beginning, or end, of the document tree and select one element accordingly. For example, the li:nth-child(4)
selector will select the fourth list item within a list. Counting begins with the first list item and increases by one for each list item, until finally locating and selecting the fourth item. When using a number outright it must be a positive number.
Expressions for pseudo-classes fall in the format of an
, an+b
, an-b
, n+b
, -n+b
, and -an+b
. The same expression may be translated and read as (a×n)±b
. The a
variable stands for the multiplier in which elements will be counted in while the b
variable stands for where the counting will begin or take place.
For example, the li:nth-child(3n)
selector will identify every third list item within a list. Using the expression this equates to 3×0
, 3×1
, 3×2
, and so forth. As you can see the results of this expression lead to the third, sixth, and every element a multiple of three being selected.
Additionally, the odd
and even
keyword values may be used. As expected, these will select odd or even elements respectively. Should keyword values not be appealing the expression of 2n+1
would select all odd elements while the expression of 2n
would select all even elements.
Using the li:nth-child(4n+7)
selector will identify every fourth list item starting with the seventh list item. Again, using the expression this equates to (4×0)+7
, (4×1)+7
, (4×2)+7
, and so forth. The results of this expression leading to the seventh, eleventh, fifteenth, and every element that is a multiple of four here on out being selected.
Using the n
argument without being prefixed by a number results in the a
variable being interpreted as 1
. With the li:nth-child(n+5)
selector every list item will be selected starting with the fifth list item, leaving the first four list items unselected. Within the expression this breaks down as (1×0)+5
, (1×1)+5
, (1×2)+5
, and so forth.
To make things a bit more complicated negative numbers may also be used. For example, the li:nth-child(6n-4)
selector will start counting every sixth list item starting at negative four, selecting the second, eighth, and fourteenth list items and so forth. The same selector, li:nth-child(6n-4)
, could also be written as li:nth-child(6n+2)
, without the use of a negative b
variable.
A negative a
variable, or a negative n
argument, must be followed by a positive b
variable. When preceded by a negative a
variable or negative n
argument the b
variable identifies how high the counting will reach. For example, the li:nth-child(-3n+12)
selector will select every third list item within the first twelve list items. The selector li:nth-child(-n+9)
will select the first nine list items within a list, as the n
argument, without any stated a
variable, is defaulted to -1
.
:nth-child(n) & :nth-last-child(n)
With a general understanding of how the pseudo-class numbers and expressions work let’s take a look at the actual pseudo-classes in which these numbers and expressions may be used, the first of which being the :nth-child(n)
and :nth-last-child(n)
pseudo-classes. These pseudo-classes work a bit like the :first-child
and :last-child
pseudo-classes in that they look, and count, all of the elements within a parent and only select the element specifically identified. The :nth-child(n)
works from the beginning of the document tree while the :nth-last-child(n)
works from the end of the document tree.
Using the :nth-child(n)
pseudo-class, let’s look at the li:nth-child(3n)
selector. The selector here will identify every third list item, thus lines 4 and 7 are selected.
CSS
li:nth-child(3n) {...}
HTML
<ul>
<li>...</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
<li>...</li>
<li>This list item will be selected</li>
</ul>
Using a different expression within the :nth-child(n)
pseudo-class will yield a different selection. The li:nth-child(2n+3)
selector, for example, will identify every second list item starting with the third and then onward. As a result, the list items lines 4 and 6 are selected.
CSS
li:nth-child(2n+3) {...}
HTML
<ul>
<li>...</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
</ul>
Changing the expression again, this time with a negative value, yields new selection. Here the li:nth-child(-n+4)
selector is identifying the top four list items, leaving the rest of the list items unselected, thus lines 2 through 5 are selected.
CSS
li:nth-child(-n+4) {...}
HTML
<ul>
<li>This list item will be selected</li>
<li>This list item will be selected</li>
<li>This list item will be selected</li>
<li>This list item will be selected</li>
<li>...</li>
<li>...</li>
</ul>
Adding a negative integer before the n
argument changes the selection again. Here the li:nth-child(-2n+5)
selector identifies every second list item within the first five list items starting with the first list item, thus the list items on lines 2, 4, and 6 are selected.
CSS
li:nth-child(-2n+5) {...}
HTML
<ul>
<li>This list item will be selected</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
</ul>
Changing from the :nth-child(n)
pseudo-class to the :nth-last-child(n)
pseudo-class switches the direction of counting, with counting starting from the end of the document tree using the :nth-last-child(n)
pseudo-class. The li:nth-last-child(3n+2)
selector, for example, will identify every third list item starting from the second to last item in a list, moving towards the beginning of the list. Here the list items on lines 3 and 6 are selected.
CSS
li:nth-last-child(3n+2) {...}
HTML
<ul>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
<li>...</li>
<li>This list item will be selected</li>
<li>...</li>
</ul>
:nth-of-type(n) & :nth-last-of-type(n)
The :nth-of-type(n)
and :nth-last-of-type(n)
pseudo-classes are very similar to that of the :nth-child(n)
and :nth-last-child(n)
pseudo-classes, however instead of counting every element within a parent the :nth-of-type(n)
and :nth-last-of-type(n)
pseudo-classes only count elements of their own type. For example, when counting paragraphs within an article, the :nth-of-type(n)
and :nth-last-of-type(n)
pseudo-classes will skip any headings, divisions, or miscellaneous elements that are not paragraphs, while the :nth-child(n)
and :nth-last-child(n)
would count every element, no matter its type, only selecting the ones that match the element within the stated selector. Additionally, all of the same expression possibilities used within the :nth-child(n)
and :nth-last-child(n)
pseudo-classes are also available within the :nth-of-type(n)
and :nth-last-of-type(n)
pseudo-classes.
Using the :nth-of-type(n)
pseudo-class within the p:nth-of-type(3n)
selector we are able to identify every third paragraph within a parent, regardless of other sibling elements within the parent. Here the paragraphs on lines 5 and 9 are selected.
CSS
p:nth-of-type(3n) {...}
HTML
<article>
<h1>...</h1>
<p>...</p>
<p>...</p>
<p>This paragraph will be selected</p>
<h2>...</h2>
<p>...</p>
<p>...</p>
<p>This paragraph will be selected</p>
</article>
As with the :nth-child(n)
and :nth-last-child(n)
pseudo-classes, the primary difference between the :nth-of-type(n)
and :nth-last-of-type(n)
pseudo-classes is that the :nth-of-type(n)
pseudo-class counts elements from the beginning of the document tree and the :nth-last-of-type(n)
pseudo-class counts elements from the end of the document tree.
Using the :nth-last-of-type(n)
pseudo-class we can write the p:nth-last-of-type(2n+1)
selector which identifies every second paragraph from the end of a parent element starting with the last paragraph. Here the paragraphs on lines 4, 7, and 9 are selected.
CSS
p:nth-last-of-type(2n+1) {...}
HTML
<article>
<h1>...</h1>
<p>...</p>
<p>This paragraph will be selected</p>
<p>...</p>
<h2>...</h2>
<p>This paragraph will be selected</p>
<p>...</p>
<p>This paragraph will be selected</p>
</article>
Target Pseudo-class
The :target
pseudo-class is used to style elements when an element’s ID attribute value matches that of the URI fragment identifier. The fragment identifier within a URI can be recognized by the hash character, #
, and what directly follows it. The URL http://example.com/index.html#hello
includes the fragment identifier of hello
. When this identifier matches the ID attribute value of an element on the page, <section id="hello">
for example, that element may be identified and stylized using the :target
pseudo-class. Fragment identifiers are most commonly seen when using on page links, or linking to another part of the same page.
Looking at the code below, if a user would visit a page with the URI fragment identifier of #hello
, the section with that same ID attribute value would be stylized accordingly using the :target
pseudo-class. If the URI fragment identifier changes, and matches the ID attribute value of another section, that new section may be stylized using the same selector and pseudo-class from before.
CSS
section:target {...}
HTML
<section id="hello">...</section>
Empty Pseudo-class
The :empty
pseudo-class allows elements that do not contain children or text nodes to be selected. Comments, processing instructions, and empty text nodes are not considered children and are not treated as such.
Using the div:empty
pseudo-class will identify divisions without any children or text nodes. Below the divisions on lines 2 and 3 are selected, as they are completely empty. Even though the second division contains a comment, it is not considered to be a child, thus leaving the division empty. The first division contains text, the fourth division contains one blank text space, and the last division contains a strong
child element, thus they are all ruled out and are not selected.
CSS
div:empty {...}
HTML
<div>Hello</div>
<div><!-- Coming soon --></div><!-- This div will be selected -->
<div></div><!-- This div will be selected -->
<div> </div>
<div><strong></strong></div>
Negation Pseudo-class
The negation pseudo-class, :not(x)
, is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro)
selector uses the negation pseudo-class to identify every paragraph element without the class of intro
. The paragraph element is identified at the beginning of the selector followed by the :not(x)
pseudo-class. Inside of the parentheses falls the negation selector, the class of .intro
in this case.
Below, both the div:not(.awesome)
and :not(div)
selectors use the :not(x)
pseudo-class. The div:not(.awesome)
selector identifies any division without the class of awesome
, while the :not(div)
selector identifies any element that isn’t a division. As a result the, division on line 1 is selected, as well as the two sections on lines 3 and 4, thus they are marked bold. The only element not selected is the division with the class of awesome
, as it falls outside of the two negation pseudo-classes.
CSS
div:not(.awesome) {...}
:not(div) {...}
HTML
<div>This div will be selected</div>
<div class="awesome">...</div>
<section>This section will be selected</section>
<section class="awesome">This section will be selected</section>
Pseudo-classes Example
HTML
<table>
<thead>
<tr>
<th>Number</th>
<th>Player</th>
<th>Position</th>
<th>Height</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>Marco Belinelli</td>
<td>G</td>
<td>6-5</td>
<td>195</td>
</tr>
<tr>
<td>5</td>
<td>Carlos Boozer</td>
<td>F</td>
<td>6-9</td>
<td>266</td>
</tr>
...
</tbody>
</table>
CSS
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
th,
td {
padding: 6px 15px;
}
th {
background: #42444e;
color: #fff;
text-align: left;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td {
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
Demo
Pseudo-classes Overview
Example | Classification | Explanation |
---|---|---|
a:link | Link Pseudo-class | Selects a link that has not been visited by a user |
a:visited | Link Pseudo-class | Selects a link that has been visited by a user |
a:hover | Action Pseudo-class | Selects an element when a user has hovered their cursor over it |
a:active | Action Pseudo-class | Selects an element when a user has engaged it |
a:focus | Action Pseudo-class | Selects an element when a user has made it their focus point |
input:enabled | State Pseudo-class | Selects an element in the default enabled state |
input:disabled | State Pseudo-class | Selects an element in the disabled state, by way of the disabled attribute |
input:checked | State Pseudo-class | Selects a checkbox or radio button that has been checked |
input:indeterminate | State Pseudo-class | Selects a checkbox or radio button that neither been checked or unchecked, leaving it in an indeterminate state |
li:first-child | Structural Pseudo-class | Selects an element that is the first within a parent |
li:last-child | Structural Pseudo-class | Selects an element that is the last within a parent |
div:only-child | Structural Pseudo-class | Selects an element that is the only element within a parent |
p:first-of-type | Structural Pseudo-class | Selects an element that is the first of its type within a parent |
p:last-of-type | Structural Pseudo-class | Selects an element that is the last of its type within a parent |
img:only-of-type | Structural Pseudo-class | Selects an element that is the only of its type within a parent |
li:nth-child(2n+3) | Structural Pseudo-class | Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree |
li:nth-last-child(3n+2) | Structural Pseudo-class | Selects an element that matches the given number or expression, counting all elements from the end of the document tree |
p:nth-of-type(3n) | Structural Pseudo-class | Selects an element that matches the given number or expression, counting only elements of its type from the beginning of the document tree |
p:nth-last-of-type(2n+1) | Structural Pseudo-class | Selects an element that matches the given number or expression, counting only elements of its type from the end of the document tree |
section:target | Target Pseudo-class | Selects an element whose ID attribute value matches that of the URI fragment identifier |
div:empty | Empty Pseudo-class | Selects an element that does not contain any children or text nodes |
div:not(.awesome) | Negation Pseudo-class | Selects an element not represented by the stated argument |
Pseudo-elements
Pseudo-elements are dynamic elements that don’t exist in the document tree, and when used within selectors these pseudo-elements allow unique parts of the page to be stylized. One important point to note, only one pseudo-element may be used within a selector at a given time.
Textual Pseudo-elements
The first pseudo-elements ever released were the :first-letter
and :first-line
textual pseudo-elements. The :first-letter
pseudo-element will identify the first letter of text within an element, while the :first-line
pseudo-element will identify the first line of text within an element.
In the demonstration below the first letter of the paragraph with the class of alpha
is set in a larger font size and colored orange, as is the first line of the paragraph with the class of bravo
. These selections are made by use of the :first-letter
and :first-line
textual pseudo-elements respectively.
CSS
.alpha:first-letter,
.bravo:first-line {
color: #ff7b29;
font-size: 18px;
}
HTML
<p class="alpha">Lorem ipsum dolor...</p>
<p class="bravo">Integer eget enim...</p>
Textual Pseudo-elements Demo
Generated Content Pseudo-elements
The :before
and :after
generated content pseudo-elements create new inline level pseudo-elements just inside the selected element. Most commonly these pseudo-elements are used in conjunction with the content
property to add insignificant information to a page, however that is not always the case. Additional uses of these psuedo-elements may be to add user interface components to the page without having to clutter the document with unsemantic elements.
The :before
pseudo-element creates a pseudo-element before, or in front of, the selected element, while the :after
pseudo-element creates a pseudo-element after, or behind, the selected element. These pseudo-elements appear nested within the selected element, not outside of it. Below the :after
pseudo-element is used to display the href
attribute value of anchor links within parentheses after the actual links. The information here is helpful, but not ultimately necessary should a browser not support these pseudo-elements.
CSS
a:after {
color: #9799a7;
content: " (" attr(href) ")";
font-size: 11px;
}
HTML
<a href="http://google.com/">Search the Web</a>
<a href="http://learn.shayhowe.com/">Learn How to Build Websites</a>
Generated Content Pseudo-elements Demo
Fragment Pseudo-element
The ::selection
fragment pseudo-element identifies part of the document that has been selected, or highlighted, by a user’s actions. The selection may then be stylized, however only using the color
, background
, background-color
, and text-shadow
properties. It is worth noting, the background-image
property is ignore. While the shorthand background
property may be used to add a color, any images will be ignored.
Single Colon (:) versus Double Colons (::)
The fragment pseudo-element was added with CSS3 and in attempt to differentiate pseudo-classes from pseudo-elements the double colons were added to pseudo-elements. Fortunately most browsers will support both values, single or double colons, for pseudo-elements however the ::selection
pseudo-element must always start with double colons.
When selecting any of the text within the demonstration below the background will appear orange and any text shadows will be removed thanks to the ::selection
fragment pseudo-element. Also note, the ::-moz-selection
Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browsers.
::-moz-selection {
background: #ff7b29;
}
::selection {
background: #ff7b29;
}
Fragment Pseudo-element Demo
Pseudo-elements Example
HTML
<a class="arrow" href="#">Continue Reading</a>
CSS
.arrow {
background: #2db34a;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
text-decoration: none;
}
.arrow:before,
.arrow:after {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid #2db34a;
border-left: 15px solid transparent;
border-top: 15px solid #2db34a;
left: -15px;
}
.arrow:after {
border-bottom: 15px solid transparent;
border-left: 15px solid #2db34a;
border-top: 15px solid transparent;
right: -15px;
}
.arrow:hover {
background: #ff7b29;
}
.arrow:hover:before {
border-bottom: 15px solid #ff7b29;
border-top: 15px solid #ff7b29;
}
.arrow:hover:after {
border-left: 15px solid #ff7b29;
}
Demo
Pseudo-elements Overview
Example | Classification | Explanation |
---|---|---|
.alpha:first-letter | Textual Pseudo-elements | Selects the first letter of text within an element |
.bravo:first-line | Textual Pseudo-elements | Selects the first line of text within an element |
div:before | Generated Content | Creates a pseudo-element inside the selected element at the beginning |
a:after | Generated Content | Creates a pseudo-element inside the selected element at the end |
::selection | Fragment Pseudo-element | Selects the part of a document which has been selected, or highlighted, by a users’ actions |
Selector Browser Support
While these selectors provide a variety of opportunity and the ability to do some truly amazing things with CSS, they are at times plagued by poor browser support. Before doing anything too critical check the selectors you are wishing to use across your visitor’s most common browsers, and then make the judgment call as to whether they are appropriate or not.
CSS3.info provides a CSS3 Selectors Test tool which will inform you as to which selectors are supported by the browser in use. It’s also never a bad idea to check browser support directly from the vendor.
Additionally, Selectivizr, a JavaScript utility, provides great support for these selectors in Internet Explorer 6-8. More support, should it be necessary, can also be provided by jQuery selectors.
Selector Speed & Performance
It is important to pay attention the speed and performance of selectors, as using too many intricate selectors can slow down the rendering of a page. Be attentive and when a selector begins to look a bit foreign think about revisiting it, and seeing if a better solution can be found.
source: complex selectors en w3schools
note: There is no way of selecting an element based on the existence of a child element, i.e. you can not select the parent element. We will have to wait for CSS4 with a new pseudo selector :has(), which is still in draft status today.