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
n
th 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
n
th 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
n
th 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
n
th 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>