Pseudo-classes - HTML

CSS has a handful of pseudo-classes that you can use to modify attributes of elements in your document. Pseudo-classes are identifiers that are understood by browsers to apply to a subset of elements, without the element needing to be explicitly tagged with the style. Such classes are typically dynamic and tracked by other means than the actual class attribute.

For example, there are two pseudo-classes that can be used to modify the attributes of visited and unvisited links in the document (explained in the next section). If you use the pseudo-classes, you don’t have to actually specify the classes in individual links—the browser determines which links fit into which class (visited or not) and applies the style(s) appropriately.

The following sections discuss the various pseudo-classes available in CSS.

Defining link styles
A handful of pseudo-classes can be used with links (usually <a> tags). The link pseudo-classes are listed in Table.

Defining link styles

For example, the following definition will cause all unvisited links in the document to be rendered in blue, visited links in red, and when hovered over, green:

:link { color: blue; } :visited { color: red; } :hover {color: green; }

Note the order of the definitions; it is important. Because the link participation in the classes is dynamic, :hover must be the last definition. If the order of :visited and :hover were reversed, visited links would not turn green when hovered over because the :visited color attribute would override the :hover color attribute. The same ordering is important when using the :focus pseudo-class—place it last in the list of definitions affecting similar elements. You can combine pseudo-classes with other selector methods, as needed. For example, if you wanted all links with a class attribute of important to be rendered in a bold font, you could use the following code:

:link.important { font-weight: bold; } ...<a href=class=“important”>An important message</a>

The :first-child pseudo-class
The :first-child pseudo-class applies the designated style(s) to the first child element of a specified element. You can use this class to add additional space or otherwise change the formatting of the first child element. For example, to indent the first paragraph of all <div> elements, you could use this definition:

div > p:first-child { text-indent: 25px; }

The :lang pseudo-class
The language pseudo-class (:lang) allows constructing selectors based on the language setting for specific tags. This is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (‘ and ’). In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used:

Note:The pseudo-elements :before and :after are covered later in this chapter in the Pseudo-elements section.The :lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements. The second two definitions in the preceding example add quotes to the blockquote element, which typically does not include quotes.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics