What are Selectors and Properties
Selectors are used to select elements in the DOM. Some we have used in this class and prior, like :hover, :: before, and :: after. The :hover for example lets us change the visual appearance of a section on a page when the user hovers over something. Properties style elements with their values. Elements have properties and values. We call an element in our css and then assign values to their properties. We use the properties, for example, to assign a style to change the appearance of something when we hover or things that are before and after an element.
:optional and :required Selectors
The :optional selector can be used for forms to make it easier for a visitor who is completing the form to see which fields are not required. It can be applied to text boxes, check boxes, radio buttons and selects in forms. An example would be middle initial. The :required selector in contrast helps make apparent those fields, checkboxes, buttons, or selects that must be completed.
whitespace and z-index
The whitespace property allows us to manipulate the content’s behavior, whether it collapses or wraps in the element and how it shows up on the page. Its values are normal, pre nowrap, pre-wrap, and pre-line. The z-index property sets the stacking order of overlapping elements. We used this one when we made hamburger menus. The value for this property is a number. The highest numbered z-index value element shows on top of the lower numbered z-index element.
Summary
The CSS Tricks Almanac is a very useful resource. It defines the selectors and properties. it explains how to use them and gives examples. there are videos and code samples so that someone can get a feel for what things they can do to style their pages.