2R - CSS Tricks Almanac

Selectors and Properties

A CSS selector selects the elements to which the related styling rules will be applied to. They follow a set of rules for specificity that will determine which rules will 'win' to be applied. CSS properties describe the actual styling characteristic and will have a value assigned to it to manipulate that characteristic.

Selectors

:checked

The :checked pseudo-class selects elements when the are in the selected states. It can only be used with radio or checkbox inputs.

::marker

The ::marker pseudo-element selector can be used to stylize the marker of a list element. For example, changing the color of the numbers in an ordered list.

Properties

word-break

The word-break property can be used to change when line breaks can occur. The values can be 'normal' to break at the end of a word, 'break-all' which allows breaking at any point (not just the end of a word) and 'keep-all' for Chinese, Japanes and Korean text word that are not broken.

speak-as

The speak-as property is for specifying how a browser should speak the content it reads, such as through a screen reader. The values for speak-as are normal, spell-out (spell out the content), digits (says digits one at a time), literal-puncuation (says things like 'period' or 'semi-colon') and no-puncuation (skips punctuation).

Summary

There are a number of selectors and properties that are powerful, but not commonly used. They provide utility and solutions to problems that you may not have thought about, and increase the usability for your website.