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>

More posts tagged CSS