CSS Selectors

CSS Specificity

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in the specificity value below would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.

body #content .data img:hover

• The first digit (a) is always zero, unless there is a inline style attribute applied to that element.
• The second digit (b) is the sum of the number of IDs in that selector.
• The third digit (c) is the sum of the number of classes, attributes (like input[type="text"]), and pseudo-classes (like :hover) in that selector.
• The fourth digit (d) counts the elements (like table, p, div, etc.) and pseudo-elements (like :before, :after, etc.).
• The universal selector (*) has a specificity of zero.
• If two selectors have the same specificity, the one that comes last on the stylesheet will be applied.

CSS Selectors

Universal Selectors

*

The star symbol will target every single element on the page.

* {
   margin: 0;
   padding: 0;
}

The * can also be used with child selectors.

#container * {
   color: gray;
}

Browser Compatibility

ID Selectors

#selector

#container * {
   margin: 0 auto;
   width: 960px;
}

Browser Compatibility

Class Selectors

.selector

.error {
   color: red;
}

Browser Compatibility

Attribute Selectors

[att=value]

The attribute has to have the exact value specified.

Browser Compatibility

[att~=value]

The attribute's value needs to be a whitespace separated list of words.

div[class="container bordered"] {
   border: 1px solid #333;   
}

Browser Compatibility

[att|=value]

The attribute's value is exactly value or starts with the word value and is immediately followed by -, so it would be "value-".

Browser Compatibility

[att^=value]

The attribute's value starts with the specified value.

Browser Compatibility

[att$=value]

The attribute's value ends with the specified value.

/*******************
Add a different icon next to each different type of file.
*******************/
a[href$=".jpg"] {
   background: url(jpeg.gif) no-repeat left 50%;
   padding: 2px 0 2px 20px;
}
   
a[href$=".pdf"] {
   background: url(pdf.gif) no-repeat left 50%;
   padding: 2px 0 2px 20px;
}
   
a[href$=".doc"] {
   background: url(word.gif) no-repeat left 50%;
   padding: 2px 0 2px 20px;
}

Browser Compatibility

[att*=value]

The attribute's value contains the specified value.

Browser Compatibility

input[type="text"]

Browser Compatibility

Child Selectors

.parent-selector > .child-selector

It allows you to target elements that are direct children of a particular element.

.container > p {
   color: #333;
}

Browser Compatibility

Sibling Combinators

Adjacent Sibling Combinator: selector + selector

The elements in the selector have the same parent, and the second one must come immediately after the first.

.container p {
   color: black;
}
.container h4 + p {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am black color.</p>
   <h4>Heading</h4>
   <p>I am red color.</p>
   <p>I am black color.</p>
</div>

Browser Compatibility

General Sibling Combinator: selector ~ selector

The elements in the selector have the same parent, and the second selector doesn't have to immediately follow the first one.

.container p {
   color: black;
}
.container h4 ~ p {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am black color.</p>
   <h4>Heading</h4>
   <p>I am red color.</p>
   <p>I am red color.</p>
</div>

Browser Compatibility

Pseudo-classes

Dynamic Pseudo-classes

There are two types of dynamic pseudo-classes: link and user action ones. The link are :link and :visited, while the user action ones are :hover, :active and :focus.

IE6 only allows the :hover pseudo-class to be applied to link elements (a) and only IE8 accepts the :active state on elements other than links.

Browser Compatibility

selector:first-child

Browser Compatibility

The Language Pseudo-class :lang()

It allows you to match an element based on its language.

:lang(en) > a#flag {
   background-image: url(english.gif);
}
 
:lang(fr) > a#flag {
   background-image: url(french.gif);
}

Browser Compatibility

CSS 3 Pseudo-classes

:target

The UI Element States Pseudo-classes

Some HTML elements have an enable or disabled state (for example, input fields) and checked or unchecked states (radio buttons and checkboxes). These states can be targeted by the :enabled, :disabled or :checked pseudo-classes, respectively.

input:disabled {
   background: #eee;
   border: 1px solid #ccc;
   color: #666;
}
 
input[type="checkbox"]:checked {
   color: red;
}

Browser Compatibility

CSS 3 Structural Pseudo-classes

selector:nth-child(n)

The :nth-child(n) pseudo-class allows you to target one or more specific children of a parent element.

.container p {
   color: black;
}
 
.container p:nth-child(2) {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
<div>

In this case, the third and sixth p elements will be red color.

.container p {
   color: black;
}
 
/*******************
The following expression will match every third p element starting from the first p element.
*******************/
.container p:nth-child(3n) {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
   <p>I am red color.</p>
<div>

In this case, every third p elements will be red color starting from the second p element.

.container p {
   color: black;
}
 
/*******************
The following expression will match every third p element starting from the second.
*******************/
.container p:nth-child(3n+2) {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
<div>

.container p {
   color: black;
}
 
.container p:nth-child(-n+4) {
   color: red;
}

<div class="container">
   <p>I am red color.</p>
   <p>I am red color.</p>
   <p>I am red color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
<div>

.container p {
   color: black;
}
 
.container p:nth-child(even) {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am red color.</p>
<div>

Browser Compatibility

selector:nth-last-child(n)

The :nth-last-child(n) pseudo-class works basically as the :nth-child(n) pseudo-class, but it starts counting the elements from the last one.

Browser Compatibility

selector:nth-of-type(n)

The :nth-of-type(n) pseudo-class works just like the :nth-child(n), with the difference that it only counts children that match the element in the selector.

.container p {
   color: black;
}
 
.container p:nth-child(2) {
   color: red; /* It doesn't work. */
}
 
.container p:nth-of-type(2) {
   color: red;
}

<div class="container">
   <p>I am black color.</p>
   <h4>I am title.</h4>
   <p>I am red color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
   <p>I am black color.</p>
<div>

Browser Compatibility

selector:nth-last-of-type(n)

Browser Compatibility

selector:last-child

The :last-child pseudo-class targets the last child of a parent element.

Browser Compatibility

selector:only-child

The :only-child pseudo-class represents an element that is the only child of its parent.

.container p:only-child {
   color: red;
}

<div class="container">
   <p>I am red color.</p>
</div>

Browser Compatibility

selector:first-of-type, :last-of-type

The :first-of-type pseudo-class is used to target an element that is the first of its type within its parent.

Browser Compatibility

selector:only-of-type

The :only-of-type pseudo-class represents an element that is the only child of its parent with the same element.

Browser Compatibility

:empty

The :empty pseudo-class represents an element that has no content within it.

.container .content:empty {
   display: none;
}

The Negation Pseudo-class

selector:not(selector)

The negation pseudo-class, :not(), lets you target elements that do not match the selector that is represented by its argument.

div:not(#container) {
   color: red;
}

Browser Compatibility

Pseudo-elements

selector:before, selector:after

The :before and :after pseudo-elements are used to insert content before or after an element's content, purely via CSS.

#container ol > li:before {
   background: #333;
   border-radius: 20px;
   color: #fff;
   content: counter(li);
   counter-increment: li;
   height: 20px;
   left: -25px;
   position: absolute;
   top: 1px;
   width: 20px;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
.clearfix:after {
   clear: both;
}

Browser Compatibility

selector::first-letter

The ::first-letter pseudo-element will match the first letter of a block, unless it's preceded by some other content, like an image, on the same line.

selector::first-line

The ::first-line pseudo-element will match the first line of a block, inline-block, table-caption or table-cell level element.

Related Posts

• Taming Advanced CSS Selectors
• The 30 CSS Selectors You Must Memorize