Selectors and pseudo-selectors

Selectors are a pattern used to select the elements which we want to style. A selector can contain one or more simple selectors separated by combinators. The CSS3 Selectors module introduces three new attribute selectors; they are grouped together under the heading Substring Matching Attribute Selectors.

These new selectors are as follows:

  • [att^=val]: The "begins with" selector
  • [att$=val]: The "ends with" selector
  • [att*=val]: The "contains" selector

The first of these new selectors, which we will refer to as the "begins with" selector, allows the selection of elements where a specified attribute (for example, the href attribute of a hyperlink) begins with a specified string (for example, http://, https://, or mailto:).

In the same way, the additional two new selectors, which we will refer to as the "ends with" and "contains" selectors, allow the selection of elements where a specified attribute either ends with or contains a specified string respectively.

A CSS pseudo-class is just an additional keyword to selectors that tells a special state of the element to be selected. For example, :hover will apply a style when the user hovers over the element specified by the selector. Pseudo-classes, along with pseudo-elements, apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator, such as :visited, and the status of its content, such as :checked, on some form elements.

The new pseudo-classes are as follows:

Type

Details

:last-child

It is used to match an element that is the last child element of its parent element.

:first-child

It is used to match an element that is the first child element of its parent element.

:checked

It is used to match elements such as radio buttons or checkboxes which are checked.

:first-of-type

It is used to match the first child element of the specified element type.

:last-of-type

It is used to match the last child element of the specified element type.

:nth-last-of-type(N)

It is used to match the Nth child element from the last of the specified element type.

:only-child

It is used to match an element if it's the only child element of its parent.

:only-of-type

It is used to match an element that is the only child element of its type.

:root

It is used to match the element that is the root element of the document.

:empty

It is used to match elements that have no children.

:target

It is used to match the current active element that is the target of an identifier in the document's URL.

:enabled

It is used to match user interface elements that are enabled.

:nth-child(N)

It is used to match every Nth child element of the parent.

:nth-of-type(N)

It is used to match every Nth child element of the parent counting from the last of the parent .

:disabled

It is used to match user interface elements that are disabled.

:not(S)

It is used to match elements that aren't matched by the specified selector.

:nth-last-child(N)

Within a parent element's list of child elements, it is used to match elements on the basis of their positions.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.129.249.194