Understanding Selectors - HTML

CSS styles work by taking a definition of attributes and applying them to any tags that match the selector associated with the definition.

As a review, CSS style definitions follow this format:

selector { property1: value1; property2: value2; ... propertyN: valueN; }

The selector is what browsers use to match tags in a document to apply the definition. The selector can take several different forms, offering a lot of flexibility to match almost any use of tags in a document.

Matching elements by name
The easiest selector to understand is the plain element selector, as in the following example:

h1 { color: red; }

Using the actual element name (h1) as the selector causes all those tags to be formatted with the attributes of the definition (color: red). You can also attach multiple selectors to the same definition by listing them all in the selector area, separated by commas. For example, this definition will affect all heading tags in the document:

h1, h2, h3, 4h, h5, h6 { color: red; }

Using the universal selector
The universal selector can be used to match any element in the document. The universal selector is an asterisk (*). As an extreme example, you can use the universal selector to match every tag in a document:

* { color: red; }

Every tag will have the color: red attribute applied to it. Of course, you would rarely want a definition to apply to all elements of a document. You can also use the universal selector to match other elements of the selector. For example, using the child/descendent matching method of selectors, you can use the universal selector to select everything between the parent and the descendent. The following selector matches any <ol> tag that is a descendent of a <td> tag, which is a descendent of a <tr> tag:

tr td ol { color: red; }

Note:You’ll find more information on child/descendent selectors in the Matching child, descendent, and adjacent sibling elements section later in this chapter. However, this selector rule is very strict, requiring all three elements. If you also wanted to include descendent <ol> elements of <td> elements, you would need to specify a separate selector, or use the universal selector to match all elements between <tr> and <ol>, as in the following example:

tr * ol { color: red; }

You can use this technique with any of the selector forms discussed in this chapter.

Matching elements by class
You can also use selectors to match elements by class. Why would you want to do this? Suppose that you had two areas on your page with different backgrounds, one light and one dark. You would want the light background area to have dark text and the dark background area to have light text. You could then use the class attribute in select elements within those areas to ensure that the appropriate styles were applied. To specify a class to match with a selector you append a period and the class name to the selector. For example, this style will match any paragraph tag with a class of darkarea:

p.darkarea { color: white; }

For example, suppose that this paragraph was in the area of the document with the dark background:

<p class=“darkarea”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

The specification of the darkarea class with the paragraph tag will cause the paragraph’s text to be rendered in white.

The universal selector can be used to indicate that all tags with a given class should have the style applied. For example, this style definition will apply to all tags with the darkarea class:

*.darkarea { color: white; }

However, you can also omit the universal selector, specifying only the class for the same effect:

.darkarea { color: white; }

Matching elements by identifier
Just as you can match classes, you can also match element identifiers (the id attribute). To match identifiers, you use the pound sign (#) in the selector. For example, the following style will match any tag that has an id attribute of comment:

#comment { background-color: green; }

Matching elements that contain a specified attribute
Besides class and id, you can match any attribute. To do so, specify the attribute and the value(s) you want to match in the selector. This form of the selector has the following format:

element[attribute=“value”]

For example, if you want to match any table with a border attribute set to 3, you could use this definition:

table[border=“3”]

You can also match elements that contain the attribute, no matter what the value of the attribute is set to. For example, to match any table with a border attribute, you could use this definition:

table[border]

You can combine the various selector formats for even more specificity. For example, the following selector will match table tags with a class attribute of datalist, and a border attribute of 3:

table.datalist[border=“3”]

You can stack multiple attribute definitions for more specificity. Each attribute is specified in its own bracketed expression. For example, if you wanted to match tables with a border attribute of 3 and a width attribute of 100%, you could use this selector:

table[border=“3”][width=“100%”]

Note :Two other attribute-matching methods can be used to match a value in a space or hyphen-separated list in an attribute’s value. To match a value in a spaceseparated list, you use ∼= instead of the usual equal sign (=). To match a value in a hyphen-separated list, you use |= instead of the usual equal sign (=). For example, the following definition would match “us” in a space-separated value in the language attribute:

[language∼=“us”]

Matching child, descendent, and adjacent sibling elements
One of the most powerful selector methods you can use for matching elements is defining selectors that use the relationships between elements. For example, you can specify a style for italic text only when in a heading, or list items in ordered lists.

Understanding document hierarchy
All elements in a document are related to other elements. The hierarchy follows the same nomenclature as family trees—ancestors, parents, children, descendents, and siblings. For example, consider the following code , which shows a typical HTML document and its hierarchy.

A graphical representation of the document’s hierarchy.

A graphical representation of the document’s hierarchy.

Ancestors and descendents
Ancestors and descendents are elements that are linked by lineage, no matter the distance. For example, the list elements under div2 are descendents of the body element, and the body element is their ancestor.

Parents and children
Parents and children are elements that are directly connected in lineage. For example, the table rows under div1 are children of the table element, which is their parent.

Siblings
Siblings are children that share the same, direct parent. the list elements under div2 are siblings of each other. The header, paragraph, and table elements are also siblings because they share the same, direct parent (div1).

Selector mechanisms for hierarchies
There are several selector mechanisms to use in defining rules, specifying matched elements by their relationships to other elements. To specify ancestor and descendent relationships, you list all involved elements separated by spaces. For example, the following selector matches the list elements:

div.div2 li

To specify parent and child relationships, you list all involved elements separated by a right angle bracket (>). For example, the following selector matches the table element:

div.div1 table

To specify sibling relationships, you list all involved elements separated by plus signs (+). For example, the following selector matches the paragraph element under div1:

table + p

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics