Complex Selectors - Part3

Sibling Selectors Overview

Example	Classification	Explanation
h2 ~ p	General Sibling Selector	Selects an element that follows anywhere after the prior element, in which both elements share the same parent
h2 + p	Adjacent Sibling Selector	Selects an element that follows directly after the prior element, in which both elements share the same parent

Attribute Selectors

Some of the common selectors looked at early may also be defined as attribute selectors, in which an element is selected based up on its class or ID value. These class and ID attribute selectors are widely used and extremely powerful but only the beginning. Other attribute selectors have emerged over the years, specifically taking a large leap forward with CSS3. Now elements can be selected based on whether an attribute is present and what it’s value may contain.

Attribute Present Selector

The first attribute selector identifies an element based on whether it includes an attribute or not, regardless of any actual value. To select an element based on if an attribute is present or not simply include the attribute name in square brackets, [], within a selector. The square brackets may or may not follow any qualifier such as an element type or class, all depending on the level of specificity desired.

CSS

a[target] {...}

HTML

<a href="#" target="_blank">...</a>

Attribute Equals Selector

To identify an element with a specific, and exact matching, attribute value the same selector from before may be used, however this time inside of the square brackets following the attribute name, include the desired matching value. Inside the square brackets should be the attribute name followed by an equals sign, =, quotations, "", and inside of the quotations should be the desired matching attribute value.

CSS

a[href="http://google.com/"] {...}

HTML

<a href="http://google.com/">...</a>

Attribute Contains Selector

When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *, may be used within the square brackets of a selector. The asterisk should fall just after the attribute name, directly before the equals sign. Doing so denotes that the value to follow only needs to appear, or be contained, within the attribute value.

CSS

a[href*="login"] {...}

HTML

<a href="/login.php">...</a>

Attribute Begins With Selector

In addition to selecting an element based on if an attribute value contains a stated value, it is also possible to select an element based on what an attribute value begins with. Using a circumflex accent, ^, within the square brackets of a selector between the attribute name and equals sign denotes that the attribute value should begin with the stated value.

CSS

a[href^="https://"] {...}

HTML

<a href="https://chase.com/">...</a>

Attribute Ends With Selector

Opposite of the begins with selector, there is also an ends with attribute selector. Instead of using the circumflex accent, the ends with attribute selector uses the dollar sign, $, within the square brackets of a selector between the attribute name and equals sign. Using the dollar sign denotes that the attribute value needs to end with the stated value.

CSS

a[href$=".pdf"] {...}

HTML

<a href="/docs/menu.pdf">...</a>

Attribute Spaced Selector

At times attribute values may be spaced apart, in which only one of the words needs to be matched in order to make a selection. In this event using the tilde character, ~, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value.

CSS

a[rel~="tag"] {...}

HTML

<a href="#" rel="tag nofollow">...</a>

Attribute Hyphenated Selector

When an attribute value is hyphen-separated, rather than whitespace-separated, the vertical line character, |, may be used within the square brackets of a selector between the attribute name and equals sign. The vertical line denotes that the attribute value maybe hyphen-separated however the hyphen-separated words must begin with the stated value.

CSS

a[lang|="en"] {...}

HTML

<a href="#" lang="en-US">...</a>

Attribute Selectors Example

HTML

<ul>
  <li><a href="#.pdf" title="PDF Document">PDF Document</a></li>
  <li><a href="#.doc" title="Word Document">Word Document</a></li>
  <li><a href="#.jpg" title="Image File">Image File</a></li>
  <li><a href="#.mp3" title="Audio File">Audio File</a></li>
  <li><a href="#.mp4" title="Video File">Video File</a></li>
</ul>

CSS

ul {
  list-style: none;
}
ul a {
  padding-left: 22px;
}
ul a[href$=".pdf"] {
  background: url("images/pdf.png") 0 50% no-repeat;
}
ul a[href$=".doc"] {
  background: url("images/doc.png") 0 50% no-repeat;
}
ul a[href$=".jpg"] {
  background: url("images/image.png") 0 50% no-repeat;
}
ul a[href$=".mp3"] {
  background: url("images/audio.png") 0 50% no-repeat;
}
ul a[href$=".mp4"] {
  background: url("images/video.png") 0 50% no-repeat;
}

Demo

• PDF Document
• Word Document
• Image File
• Audio File
• Video File

Attribute Selectors Overview

Example	Classification	Explanation
a[target]	Attribute Present Selector	Selects an element if the given attribute is present
a[href="http://google.com/"]	Attribute Equals Selector	Selects an element if the given attribute value exactly matches the value stated
a[href*="login"]	Attribute Contains Selector	Selects an element if the given attribute value contains at least once instance of the value stated
a[href^="https://"]	Attribute Begins With Selector	Selects an element if the given attribute value begins with the value stated
a[href$=".pdf"]	Attribute Ends With Selector	Selects an element if the given attribute value ends with the value stated
a[rel~="tag"]	Attribute Spaced Selector	Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated
a[lang|="en"]	Attribute Hyphenated Selector	Selects an element if the given attribute value is hyphen-separated and begins with the word stated