CSS selectors allow the developer to target certain elements on the document. They can be as simple as class selectors and as complex as pseudo-selectors that are accessed using a colon. CSS properties are paired with values to style the selected element.
The ::before and ::after pseudo-elements can insert content onto a page without putting it in the HTML document. Using ::before will position the content before the element and ::after will position it after. These selectors can be helpful when creating hover states that need content to appear on hover, but they can be used anywhere you want to add to an element using CSS.
The :first-of-type allows you to select the first occurence of an element within the container it is in. For example, if you have three paragraphs in a div and want the first one colored red, you could use p:first-of-type {color: red}.
The box-shadow property is used to put shadows behind or inside of elements in CSS. The syntax for the box shadow is box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; and choosing different values for each allows you to create a wide variety of shadows.
The content property is used with the ::before and ::after pseudo-elements to insert content onto the page. The options for content include:
The CSS tricks almanac is a very helpful resource that includes a comprehensive list of every selector and property available in CSS. Beginners and seasoned developers can both use this list as a guide to what can be created with CSS.