complex selector html

Complex Selectors
1 Complex Selectors

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.

Up until recently the focus of CSS never really touched on selectors. Occasionally there would be incremental updates within the selectors specification, but never any real ground breaking improvements. Fortunately, more attention has been given to selectors as of late, taking a look at how to select different types of elements and elements in different states of use.

CSS3 brought new selectors, opening a whole new world of opportunities and improvements to existing practices. Here we'll discuss selectors, old and new, and how to best put them to use.
2 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.

h1 {...}
.tagline {...}
#intro {...}

<section id="intro">
  <h1>...</h1>
  <h2 class="tagline">...</h2>
</section>

2.1 Common Selectors Overview
Example 	Classification 	Explanation
h1 	Type Selector 	Selects an element by it's 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
3 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.
3.1 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 are lines 3 and 5 are selected.

article h2 {...}

<h2>...</h2>
<article>
  <h2>This heading will be selected</h2>
  <div>
    <h2>This heading will be selected</h2>
  </div>
</article>

3.2 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 it's parent article, thus selected.

article > p {...}

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
</article>

3.2.1 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
4 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.
4.1 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.

h2 ~ p {...}

<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>

4.2 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.

h2 + p {...}

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

4.3 Sibling Selectors Example

<input type="checkbox" id="toggle">
<label for="toggle">&#9776;</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>

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;
}

4.3.1 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
5 Attribute Selectors

Some of the common selectors looked at early may also be defined as attribute selectors, in which an element is selected based up on 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.
5.1 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 simply 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.

a[target] {...}

<a href="#" target="_blank">...</a>

5.2 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.

a[href="http://google.com/"] {...}

<a href="http://google.com/">...</a>

5.3 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.

a[href*="login"] {...}

<a href="/login.php">...</a>

5.4 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.

a[href^="https://"] {...}

<a href="https://chase.com/">...</a>

5.5 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.

a[href$=".pdf"] {...}

<a href="/docs/menu.pdf">...</a>

5.6 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.

a[rel~="tag"] {...}

<a href="#" rel="tag nofollow">...</a>

5.7 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.

a[lang|="en"] {...}

<a href="#" lang="en-US">...</a>

5.8 Attribute Selectors Example

<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>

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");
}

5.8.1 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
6 Pseudo-classes

Pseudo-classes are similar to regular classes in HTML however they are not directly stated within the markup, instead they are a 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.
6.1 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 {...}

6.2 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 {...}

6.3 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 or unselected it lives in an indeterminate state, from which the :indeterminate pseudo-class can be used to target these elements.

input:checked {...}
input:indeterminate {...}

6.4 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.
6.4.1 :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.

li:first-child {...}
li:last-child {...}
div:only-child {...}

<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>

6.4.2 :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 reflex 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.

p:first-of-type {...}
p:last-of-type {...}
img:only-of-type {...}

<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.
6.4.3 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 forth 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 forth 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 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.
6.4.4 :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.

li:nth-child(3n) {...}

<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.

li:nth-child(2n+3) {...}

<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.

li:nth-child(-n+4) {...}

<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 an 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, thus the list items on lines 2, 4, and 6 are selected.

li:nth-child(-2n+5) {...}

<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.

li:nth-last-child(3n+2) {...}

<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>

6.4.5 :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 it's 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.

p:nth-of-type(3n) {...}

<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.

p:nth-last-of-type(2n+1) {...}

<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>

6.5 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.

section:target {...}

<section id="hello">...</section>

6.6 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 third 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.

div:empty {...}

<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>

6.7 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.

div:not(.awesome) {...}
:not(div) {...}

<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>

6.8 Pseudo-classes Example

<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>

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;
}

6.8.1 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 it's type within a parent
p:last-of-type 	Structural Pseudo-class 	Selects an element that is the last of it's type within a parent
img:only-of-type 	Structural Pseudo-class 	Selects an element that is the only of it's 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 it's 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 it's 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
7 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.
7.1 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.

.alpha:first-letter,
.bravo:first-line {
  color: #ff7b29;
  font-size: 18px;
}

<p class="alpha">Lorem ipsum dolor...</p>
<p class="bravo">Integer eget enim...</p>

7.1.1 Textual Pseudo-elements Demo

body {
 color: #666;
 font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.alpha:first-letter,
.bravo:first-line {
 color: #ff7b29;
 font-size: 18px;
}
p {
 margin-bottom: 24px;
}
p:last-of-type {
 margin-bottom: 0;
}
.alpha:first-letter,
.bravo:first-line {
  color: #ff7b29;
  font-size: 18px;
}

<p class="alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum dignissim leo a interdum. Duis eu orci velit.</p>
<p class="bravo">Integer eget enim pulvinar leo consectetur tincidunt ut sed erat. Etiam elit velit, molestie eu rutrum vel, vehicula feugiat augue. Vestibulum elementum dictum turpis ac blandit.</p>

7.2 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 an pseudo-element before, or in front of, the selected element, while the :after pseudo-element creates an 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.

a:after {
  color: #9799a7;
  content: " (" attr(href) ")";
  font-size: 11px;
}

<a href="http://google.com/">Search the Web</a>
<a href="http://learn.shayhowe.com/">Learn How to Build Websites</a>

7.2.1 Generated Content Pseudo-elements Demo

body {
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
a {
  color: #0087cc;
  text-decoration: none;
}
a:hover {
color: #ff7b29;
}
a:after {
  color: #9799a7;
  content: " (" attr(href) ")";
  font-size: 11px;
}

<ul>
  <li><a href="http://google.com/">Search the Web</a></li>
  <li><a href="http://learn.shayhowe.com/">Learn How to Build Websites</a></li>
</ul>

7.3 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.
7.3.1 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;
}

7.4 Pseudo-elements Example

<a class="arrow" href="#">Continue Reading</a>

.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;
}

7.4.1 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
7.4.2 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 visitors 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.
7.4.3 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.
8 Introduction to the Cascade
8.1 Multiple Sources

The most common scenario authors will be concerned with are the style rules which are declared by the author, but a style sheet may originate from several different sources:

    The Author may specify style rules for a document
    The User may also specify style behaviors for viewing one or more documents - possibly through a special user interface or through a special external stylesheet.
    The browser will also have its own set of default rendering behaviors which, whether specified using an ACTUAL style sheet or by some other means accomplishes the same goal - behaving as if the browser has its own "default style sheet." This default style sheet is the base set of rendering rules - applied whether the user and author specify their own style sheet rules or not.

8.2 Multiple Methods

In addition, style sheet rules may be specified using several different methods, any of which are legal:

    External Style Sheets (using the HTML LINK element)

    <link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

    Embedded Style Sheets (using the HTML STYLE element)

    <style type="text/css">
    body {
      font-size: 14px;
    }
    </style>

    Imported Style Sheets (@import)

    <style type="text/css">
      @import url(Path To stylesheet.css)
    </style>

    Inline Style Rules (using the HTML STYLE attribute])

    <p style="font-size:14px;color:red;">Some text here...</p>

    Non-CSS rendering rules (eg: the HTML FONT element, that is deprecated in HTML5)

    <font size="3" color="red">This is some text!</font>
    <!-- Not Supported in HTML5. -->

When more than one style rule is specified for a single CSS selector or element, using any of these sources or methods, and they are in direct conflict with one another, what should happen? When all is said and done, CSS generates a single, cohesive "virtual" style sheet using all the style rules (explicitly stated or not) from all of these disparate sources; CSS "cascades" (combines) all of them together. When conflicts arise between style rules, resolution is determined using a weighted scale. Each style rule will carry a specific weight on this scale; when two or more rules are in conflict, the rule with the highest weight will "win" and be rendered.
  	Lowest Importance 	  	Highest Importance
Ownership 	Browser Defaults 	Reader's Style Sheet 	Author's Style Sheet
Specification Method 	Linked Style Sheet 	Embedded Style Sheet 	Inline Styles
Element Selector Specificity 	Contextual Selector Depth 	Class 	ID
9 Inheritance

Some values are inherited by the children of an element in the document tree, as described above. Each property defines whether it is inherited or not.

Suppose there is an H1 element with an emphasizing element (EM) inside:

<h1>The headline <em>is</em> important!</h1>

If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue.

When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child.

For example, given the following style sheet:

body { font-size: 10pt }
h1 { font-size: 130% }

<body>
  <h1>A <em>large</em> heading</h1>
</body>

the 'font-size' property for the H1 element will have the computed value '13pt' (130% times 10pt, the parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the computed value '13pt' as well. If the user agent does not have the 13pt font available, the actual value.
9.1 The !important value

The important keyword makes a declaration take precedence over normal declarations—those that are not tagged with the important keyword. So p { color: red ! important } takes precedence over p { color: green }.

The syntax for an important declaration is property: value ! important

The relative importance of a rule also depends on its the source: whether it comes from a style sheet specified by the document author, the user or the user agent (default stylesheet).

The order of declarations from least important to most important:

    user agent declarations
    user normal declarations
    author normal declarations
    author important declarations
    user important declarations

User important declarations take precedence over everything else. This allows users to override the page designer's presentation to meet their needs. For example a user could override the text colours to be yellow on black in a large font to make the text easier to read.
9.2 The inherit value

Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes the same specified value as the property for the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.

If the 'inherit' value is set on the root element, the property is assigned its initial value.

In the example below, the 'color' and 'background' properties are set on the body element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.

body {
 color: black !important;
 background: white !important;
}

* {
 color: inherit !important;
 background: transparent !important;
}

    1. Complex Selectors
    2. Common Selectors
    3. Child Selectors
    4. Sibling Selectors
    5. Attribute Selectors
    6. Pseudo-classes
    7. Pseudo-elements
    8. Introduction to the Cascade
    9. Inheritance