CSS Style Selector Reference

Overview

A style selector contains one or more style properties and defines a set of conditions that an element must match in order to have any properties applied to it. A rule contains one or more selectors and defines a condition that the current environment must meet to have the selectors considered.

The library supports the use of a sub-set of all the current CSS selectors and at-rules. These are detailed below.

/* A simple selector matching all div elements */
div {
  color: red;
}

/* A simple selector matching all elements tagged with the 'blue' class */
.blue {
  color: blue;
}

/* Adds a border and padding to all blue tagged divs */
div.blue{
  border: solid 1pt blue;
  padding: 5pt;
}

@media print{
  /* All styles within this rule will be applied by the library */
  div {
    color: black;
  }
}

For more information on selectors see the Using Styles articles.

Unsupported Rules

If the library encounters a css rule it cannot understand the entire content of that rule will be skipped.

@scope (.article-body) to (figure) {
  /* Nothing after this will be checked
  img {
    border: 5px solid black;
    background-color: goldenrod;
  }
  */
}

.next{
  /* This will be included */
  color: red;
}

Unsupported Selectors

If the library encounters a css selector it cannot understand, then it will be skipped. But any valid selectors will be maintained.

.myclass[lang="pt"] {
  /* Nothing after this will be checked.
  img {
    border: 5px solid black;
    background-color: goldenrod;
  */
}

.next{
  /* This will be included */
  color: red;
}

Combining Selectors

If the library encounters an individual css selector within a selector list, that it cannot understand, then it will be skipped. But any valid selectors will be maintained.

.myclass[lang="pt"], .next {
  /* This will be included for .next */
  color: red;
}

Selector Reference

The library supports the use of the following selectors and rules, sorted by category.

Style Selectors

The following selectors are supported in the library.

Style Combinators

Combinators allow mutiple selectors to be combined into a single match check. The following combinators are supported in the library .

Style Rules Reference

Style Pseudo-Element Reference

Pseudo element are keywords added to a selector to identify particular parts of a matching element