A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

• The element or elements which are selected by the selector are referred to as the subject of the selector.

If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. See the following code:

There is a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.

A type selector selects an HTML tag/element in your document. Type selectors are not case-sensitive.

The universal selector is indicated by an asterisk (*). It selects everything in the document.

The class selector will select everything in the document with that class applied to it. The case-sensitive class selector starts with a dot (.) character.

• You can create a selector that will target specific elements with the class applied. We do this by using the type selector for the element we want to target, with the class appended using a dot, with no white space in between.
• You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present.

ID selectors can select an element that has the id set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. For example:

These selectors enable the selection of an element based on the presence of an attribute alone (for example href), or on various different matches against the value of the attribute.

Type of attribute selectors:

• If you want to match attribute values case-insensitively you can use the value "i" before the closing bracket. This flag tells the browser to match ASCII characters case-insensitively. Without the flag the values will be matched according to the case-sensitivity of the document language — in HTML's case it will be case sensitive.

Substring matching selectors

These selectors allow for more advanced matching of substrings inside the value of your attribute.

Examples:

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.

• Pseudo-classes are keywords that start with a colon. For example, :hover is a pseudo-class.

Some pseudo-classes:

Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

• Pseudo-elements start with a double colon ::. For example, ::before is a pseudo-element.

Combinators combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.

Some types of combinators:

• The CSS nesting module allows you to write nested rules that use combinators to create complex selectors.