Saturday, 17 November 2012

Advanced CSS selectors

Tags:
A continuation of my post CSS selectors you must know, this one is going to look at the more advanced selectors available to us. 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 sibling elements of S1 matching S2. 
h2 ~ p
{ }
 
<h2>Heading</h2>
<p>Some paragraph.</p>
<p>Another paragraph.</p>

S1 + S2

This selects all elements matching S2 that are the next sibling of S1. I've found this particularly useful when applied to radio button or checkbox labels.
input + label
{ }
 
<input type="checkbox" />
<label>Checkbox</label>
 

S[attr]

This selects all elements matching S that have the attribute attr specified. 
span[title]
{ }
 
<span>No title</span>
<span title="A link">Has title</span>
<span title="">Empty title</span>

S[attr=val]

This selects all elements matching S that have the attribute attr specified and it equals val. 
a[href="http://www.growingwiththeweb.com"]
{ }
 
<a href="#">A link</a>
<a href="http://www.growingwiththeweb.com">Home</a>
 

S[attr~=val]

This selects all elements matching S that has the attribute attr whose value is a whitespace separated list with val being one of the values. 
*[title~="important"]
{ }
 
<a title="This is a really important message.">Hover over me</a>
<a title="This is a regular message.">Hover over me</a>
 

S[attr|=val]

This selects all elements matching S that has the attribute attr whose value is either exactly val of begins with val followed by '-'. This was primarily intended for use with the hreflang attribute that specifies the language of the resource at the end of a link. 
a[hreflang|=en]
{ }
 
<a hreflang="en-US">America</a>
<a hreflang="en-AU">Australia</a>
<a hreflang="ko-KR">Korea</a>

S[attr^=val]

This selects all elements matching S that has the attribute attr whose value begins with val. 
a[href^="https://"]
{ }
 
<a href="https://www.growingwiththeweb.com">A Secure URL</a>
 
 

S[attr$=val]

This selects all elements matching S that has the attribute attr whose value ends with val. I've found this particularly useful when styling ids in applications built with WebForms.
a[href$=".pdf"]
{ }
 
<a href="/document.pdf">Document</a>
 
 

S[attr*=val]

This selects all elements matching S that has the attribute attr whose value contains at least one instance of val. 
a[href*="google.com"]
{ }
 
<a href="http://www.google.com/">Google</a>
 
 

S1:not(S2)

This selects all elements matching S1 that do not also match S2. 
div:not(.lonely)
{ }
 
<div>First</div>
<div class="lonely">Second</div>
<div>Third</div>

S:nth-child(n)

This selects all elements matching S where they are the nth child of their parent. We can make an expression using n, for example :nth-child(2n+1) will select the first child, the third child, the fifth child, etc. 
li:nth-child(2n+1)
{ }
 
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ul>

S:nth-last-child(n)

This selects all elements matching S where they are the nth last child of their parent. Just like :nth-child(n) but it counts the other way. 
li:nth-last-child(2n+1)
{ }
 
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
</ul>

S:only-child

This selects all elements matching S that has no siblings. 
li:only-child
{ }
 
<ul>
  <li>List item 1.1</li>
</ul>
<ul>
  <li>List item 2.1</li>
  <li>List item 2.2</li>
</ul>

S:nth-of-type(n)

This selects all elements matching S that are the nth element of their type within their siblings. 
li:nth-of-type(3)
{ }
 
<ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
</ul>

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

This selects all elements matching S that are the nth last element of their type within their siblings. 
li:nth-last-of-type(3)
{ }
 
<ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
</ul>

S:first-of-type

This selects all elements matching S that are the first of
p:first-of-type
{ }
 
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

S:only-of-type

This selects all elements matching S that has no siblings of the same type. 
.lonely:only-of-type
{ }
 
<div>
  <span class="lonely">Menu item 3</span>
  <div class="lonely">Menu item 2</div>
  <div>Menu item 1</div>
</div>

S::first-letter

This selects the first character of all elements matching S. 
p:first-letter
{ }
 
<p>Lorem ipsum dolor sit amet</p>
 
 

S::first-line

This selects the first line of text of all elements matching S. This is the first line of text on the web page, not the markup.
p:first-line
{ }
 
<p>
  Lorem ipsum dolor sit amet, consectetur<!--line ends--> adipiscing
  elit. Nullam elementum nibh...
</p>