Sunday, 19 August 2012

CSS selectors you must know

Tags:
Here is a collection of CSS selectors that you really need to know if you work with CSS. Each section will first describe what is selected and then provide an example first with the CSS and then the HTML if applicable, the selected elements will be marked.

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, like with the social links on my blog.