Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 301

TABLE 4-12 Attribute selector capabilities

Attribute selector Description

= Specifies that an attribute equals a specific value. For example, the URL of an anchor

is a specify URL.

~= Specifies a space-separated list of words as the values for an attribute.

^= Specifies that the attribute has a value starting with the text specified.

$= Specifies that the attribute has a value ending with the specified text.

*= Specifies that the attribute has a value containing the specified text.

Choosing the correct selector to reference an element
Choosing the correct selector to reference an element is an important consideration. You
need to ensure that you organize your selectors and your elements such that only the desired
elements are impacted by the defined styles. For example, the following style affects all
article elements:

article{
border-color: 1px solid red;
}

If you do not want to affect all articles but only the newest article, you must distinguish
them, perhaps by adding a custom CSS class to the definition and assigning this to only the
newest article:

article.newest{
border-color: 1px solid red;
}

By specifying it this way, you are assured that not every article on the page is impacted
by the style. This topic is covered in more detail in Objective 4.6 in the section “Referencing
elements correctly.”

Finding elements by using pseudo-elements
and pseudo-classes
Pseudo-classes and pseudo-elements provide some very powerful ways to add styles to
elements. Pseudo-classes allow you to apply styles to an element based on its state, its in-
teraction with the user, or its position in the document. Pseudo-elements allow you to insert
content into the page in locations relative to the elements that the CSS is being applied to.
You will examine each of the common pseudo-classes and pseudo-elements in this section.