Defining Selectors and Properties

CSS Selectors and CSS Properties help define various elements throughout your code. CSS selectors are meant to help select elements in the document object model, or the DOM for short. CSS properties give elements a sense of style in your code. There are a lot more CSS properties than selectors because there are a few selectors that can do a lot of work, while most properties are fairly specific to a certain aspect of the web page. For instance, there are a ton of properties that have to do with borders, while there's only one selector that has to do with the before or after parts of an element.

::before/::after and :user-invalid

The selector ::before is used when the developer or designer wishes to apply certain pieces of content before the main content of the element. The ::after is the same but with the reverse effect, it applies certain pieces of content after the main content. The :user-invalid selector allows the programmer to apply certain styles to a piece of user input they deem invalid. Say the browser is asking the user to enter a number 1-50 and they enter 55, the browser would return a color or action that would call out the user for entering an invalid input.

Speak and Mask

The 'speak' property is used to have the browser speak the text that is on the page. Speak can be triggered automatically (so long as the element is not display: block and is visibility: visible, text will be read aurally), or be set to be always on or off. Speak also has 'speak-as', which can allow the text to be spelled out, read as single numbers, or skipped punctuation. The 'mask' property can be used to hide layers of an element, and it accepts one or more comma-separated values, where each value corresponds to a mask layer.

To Summarize

The CSS tricks almanac is a great place to refresh on certain properties or selectors that a developer wishes to use in their code. It's always important to properly understand the use and purpose of a selector or property before impleneting it into your code. If used improperly, it could have unintended consequences on your code as a whole, and make it poorly optimized or put together.