S1 S2

This selects all elements matching S2 that have an ancestor matching S1.

div span

<span>Span 1</span>
<div>
  <span>Span 2</span>
  <div>
    <span>Span 3</span>
  </div>
</div>

S1 > S2

This selects all elements where S2 is a direct descendant of S1.

#first > span

<span>Span 1</span>
<div id="first">
  <span>Span 2</span>
  <div>
    <span>Span 3</span>
  </div>
</div>

S[attr=val]

This selects all elements matching S that also have the attr equal the specified val.

input[type=text]

<input type="radio" />
<input type="text" />

S:link

This selects all elements matching S where the link has not been visited.

a:link

<!-- this link has been visited before -->
<a href="someurl">Some URL</a>
<!-- this link has not been visited before -->
<a href="anotherurl">Another URL</a>

S:visited

This selects all elements matching S where the link has been visited.

a:link

<!-- this link has been visited before -->
<a href="someurl">Some URL</a>
<!-- this link has not been visited before -->
<a href="anotherurl">Another URL</a>

S:active

This selects the element matching S that is currently being activated by the user. The following should clarify what state an element that accepts input is in while being interacted with using a mouse or keyboard.

• Clicked - The element is both :active and :focus
• Selected with keyboard (tab) - The element is :focus
• Activated with keyboard (enter) - The element is :active

button:active

S:focus

This selects the element matching S that is currently being focused by the user. See the above for an explanation of when this selector applies.

button:focus

S:first-child

This selects the elements matching S only when it is the first child of its parent.

li:first-child

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

S:last-child

This selects the elements matching S only when it is the last child of its parent.

li:last-child

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

S:checked

This selects all elements matching S where they are checked. This only applies to radio buttons and check boxes.

input[type=radio]:checked

<input type="radio" checked="checked" />
<input type="radio" />

S::before

This selects all elements matching S, inserts a ‘fake’ element before it and applies the CSS to that new element. You need to specify a content rule in order to have it show up.

#social-bar li::before

<ul id="social-bar">
  <!-- Adds the element here -->
  <li>Twitter</li>
</ul>

S::after

This selects all elements matching S, inserts a ‘fake’ element after it and applies the CSS to that new element. You need to specify a content rule in order to have it show up.

#social-bar li::after

<ul id="social-bar">
  <li>Twitter</li>
  <!-- Adds the element here -->
</ul>

Combining with ::before

You can create some really cool effects with minimal markup using ::before and ::after, a common example of this is creating a pure-CSS speech bubble or tooltip, like with the social links on my blog.

More posts tagged CSS