CSS Selectors

Selector

A CSS selector is the part of a CSS rule set that actually selects the content you want to style
CSS selectors allow you to select and manipulate HTML elements.
CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.

Element Selector

Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name

class Selector

The class selector selects elements with a specific class attribute

ID Selector

An ID selector is declared using a hash symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol

Universal Selector

The universal selector selects all the elements on a page

Descendant SELECTOR

The descendant selector (combinator) lets you combine two or more selectors so you can be more specific in your selection method

Child Selector

A selector that uses the child selector is similar to a selector that uses a descendant selector, except it only targets immediate child element

General Sibling Combinator

A selector that uses a general sibling combinator matches elements based on sibling relationships. That is to say, the selected elements are beside each other in the HTML.

Adjacent Sibling Combinator

A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector.
The difference is that the targeted element must be an immediate sibling, not just a general sibling

Attribute Selector

The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets

Pseudo-class

A pseudo-class uses a colon character to identify a pseudo-state that an element might be in

Pseudo-element

CSS has a selector referred to as a pseudo-element

The Cascade

The fact that style sheets are described as “cascading” is an important, if complex, part of the way styles are applied to the elements in a document. It’s called the CSS cascade, because style declarations cascade down to elements from many origins.
The cascade combines the importance, origin, specificity, and source order of the applicable style declarations to determine exactly—and without conflict—which declaration should be applied to any given element.
Inheritance is the means by which, in the absence of any specific declarations applied by the CSS cascade, a property value of an element is obtained from its parent element.

Some properties are inherited in CSS, and some are not. For example, the text-size property is inherited, but the padding and margin are not inherited by the child blocks.