A Practical Guide to Mastering CSS Selectors

Selectors are one of, if not the most important parts of CSS. They allow us to target specific elements on a webpage and add a style to them so think of them as being patterns that allow us to tell the browser what to style.

Selectors can be very simple like the element selector or ID selector but they can become more complex as they become more powerful. Let's take a look.

Essentially writing CSS is writing CSS rules each rule consists of two parts, the selector and the declaration block.

Screen Shot 2022-08-03 at 4.39.57 PM.png

CSS selectors are classified into five types:

Selectors that are simple (select elements based on name, id, class)
Selectors for combinations (select elements based on a specific relationship between them)
Selectors for pseudo-classes (select elements based on a certain state)
Selectors for pseudo-elements (select and style a part of an element)
Selectors for attributes (select elements based on an attribute or attribute value)

Simple Selectors

Universal selector: Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: ns| | Example: * will match all the elements of the document.
Type selector: Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.
Class selector: Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".
ID selector: Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".

Combination Selectors

Descendant combinator: The " " (space) combinator selects nodes that are descendants of the first element. Syntax: A B Example: div span will match all <span> elements that are inside a <div> element.
Child combinator: The > combinator selects nodes that are direct children of the first element. Syntax: A > B Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
General sibling combinator: The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax: A ~ B Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.
Adjacent sibling combinator: The + combinator matches the second element only if it immediately follows the first element. Syntax: A + B Example: h2 + p will match the first <p> element that immediately follow an <h2> element.
Column combinator Experimental: The || combinator selects nodes which belong to a column. Syntax: A || B Example: col || td will match all <td> elements that belong to the scope of the <col>.

Pseudo-classes Selectors

The pseudo allow element selection based on state information that is not contained in the document tree. For example, a:visited will match all a elements that the user has visited.

Pseudo-elements Selectors

The :: pseudo represent entities that are not included in HTML. Example: p::first-line will match the first line of all paragraph elements.

Attribute Selector

Attribute selector

Selects all elements that have the given attribute. Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).