Explain Basic CSS Selectors

Universal Selector

The universal selector is an asterisk (*) and applies styling rules to all element types in an HTML page. The universal selector has a specificity of 0 with no effect on specificity. This selector can be helpful when you wish to put a specific style on all of the HTML elements within your web page.

Element and Psuedo-Element Selectors

An element selector can be used to select all of the elements with the specified element name whereas a psuedo element can be used to style a specific part of a selected element. Some examples of element selectors include: <p>, <div> and <h1>. Psuedo-elements are denoted by double colons (::) and some examples include: ::after, ::before, and ::first-letter.

A Descendent Selector is when two elements are separated by a space in a style sheet and is used to style an element that is the descendent of another element. Selectors that share the same styling rules that are grouped together in a comma-separated list are called Grouped Selectors. Grouped Selectors can help to minimize the amount of code used as well as prevent repeat styling rules.

Class and Psuedo-Class Selectors

Class Selectors are used to style any HTML element that has a given class attribute. Class Selectors are defined by a period (.) immediately followed by the class rule. An independent class selector, for example .post, will apply the style rule declaration to any element that has the class attribute of "post." A dependent class selector, for example p.post, will select only p elements that have a class of "post."

Psuedo-Classes are used to style elements based on their state. Psuedo-Classes are defined by a single colon and some examples include: :hover, :visited, and :focus.

ID Selectors

ID Selectors are used to style a single or unique element. ID selectors are defined by a hashtag sign (#) immediately followed by the ID value, for example #post would select the element that has a ID value of post. ID selectors can also be used both dependently and independently.