The attribute selector is used to select elements based on their attributes. It checks whether an attribute is present; if yes, it checks the value of the attribute. The attribute should be enclosed within square braces. If the square braces contain only the name of the attribute, it will check if the attribute exists on the element. That's why it's also called the existence selector. In the following code snippet, the selector will target only the anchor elements having the title attribute:

a[title] { text-decoration: none; color: #000; }

The preceding syntax is helpful when checking for attributes that do not hold a value. If you remember, in the previous chapter we mentioned that some attributes do not need a value, such as the required attribute with the <input> elements, or the loop attribute with the audio and video elements. The following selector will look for all the audio elements that have the loop attribute and hide it:

audio[loop] { display: none; }

To target the element(s) that exactly matches the specified attribute value, we will use the equality attribute marked with an equal symbol (=) and the value wrapped within quotes. So, if we want to target all input elements that have the value email in their type attribute, the syntax will look like the following:

input[type="email"] { text-decoration: none; color: #000; }

Also, under the attribute selector category, we have the prefix or the "starts with" attribute selector, which is used to check if an attribute has a value that starts with some value. The following syntax will match all the images that have an id value starting with home. For example, if you want to target all the images in your home page, you can add home to the id, thus having homeLogo, homeBanner, and so on, and apply a margin of 10 px to it:

img[id^='home'] { margin:10px; }

Similarly, we have the suffix selector or the "ends with" attribute selector, which will select all the elements whose attribute ends with the value you specify. The suffix selector is marked with the dollar ($) symbol before the equal (=) sign, and the syntax will look as follows:

a[href$=".jpg"] { color: red; }

This will target all the anchor elements whose href attribute holds a value that ends with .jpg.

Another attribute selector is the substring selector, also known as the "contains" selector. As the name suggests, it matches the attribute value containing the value specified in the selector. It is marked with the asterisk (*) symbol before the equal (=) sign, and the syntax will look as follows:

ul[id*="Nav"] { float: left; list-style-type: none; }

The preceding syntax will match all the <ul> elements that have an ID containing the string Nav. For example, you have multiple <ul> elements used for navigational purposes and marked with IDs such as secondaryNav, sidebarNav, and so on.

Also, we have the hyphen selector, marked with |=, which is used to match all the attribute values that are exactly equal and is immediately followed by a hyphen. You might use this selector rarely but a typical use for it would be with values that include a hyphen, for example, the lang attribute. The following listing will target all the elements with a value that exactly matches "en", additionally followed by a hyphen, and will return en, en-us, en-uk, and so on:

ul[lang|="en"] { display: none; }

The last attribute selector would be the whitespace selector, which targets the specified attribute value that exactly matches in a space-delimited list of values. In the following code snippet, we have a <p> element with a custom data- attribute, containing three space-separated values, named new events local, and the selector will match this element since its data-post-type value matches exactly the value specified as events.

The following is the HTML code:

<p data-post-type="new events local"></p>

And the CSS code is as follows:

p[data-post-type~="events"] { float: left; color: red }

A CSS selector can contain multiple selectors, that is, a combination of simple selectors. A combinator selector contains more than one simple selector joined by a combinator. The combinator is a symbol that represents the relationship between the selectors. We already had three different combinators in CSS2, and CSS3 added one extra. Listed as follows are the four selectors, the combinators used, and what each selector matches:

The preceding selectors are described as follows:

A pseudo-class is similar to a class but, since it is in-built, you do not have to explicitly add it in the HTML code. Also, it differs in syntax; a class selector is preceded by a period (.), whereas a pseudo-class is preceded by a colon (:). In its basic form, a pseudo-class selector will take the following form:

selector:pseudo-class { property: value }

You can specify a pseudo-class without a selector, and it will invoke the default type selector. So, if we specify :hover alone, it will match all the elements and apply the style rule to anything in the document that can be hovered on. Else, you can be more detailed and apply the pseudo-class selector to a specific HTML element. For example, the following code snippet will apply a pink color on all the <p> elements when hovered over:

p:hover { color: pink; }

Pseudo-classes existed in CSS prior to CSS3 and you are most probably familiar with the famous :hover, :visited, and :active pseudo-classes that represent the different states of the anchor element. CSS3 introduced many more powerful pseudo-classes such as :required, :valid, :nth-child(n), :first-child, :last-child, :only-child, :first-of-type, :last-of-type, and several others.

Pseudo-elements represent parts of elements, such as the first line of a paragraph, or the part that appears after an element. Similar to a pseudo-class that acts as a class, a pseudo-element behaves as an element but is in-built and does not need to be defined in the HTML code. Pseudo-elements are distinguished by a double colon (::), which was introduced in CSS3. Note that all the pseudo-elements that were introduced before CSS3 used a single colon (:), similar to the pseudo-class syntax.

The following code snippet will select all the generated content defined by the content style property that appears after the <p> element:

The HTML code is as follows:

<p>Paragraph content goes here</p>

The CSS code is as follows:

p::after {
  content: " 'I come after a paragraph' ";
  color: blue; background-color: yellow;
}

The output will be:

Paragraph content goes here 'I come after a paragraph'

The following table lists the pseudo-elements: