CSS Select Text Fundamentals Explained

CSS selectors are the foundation of selecting text in CSS, and they come in different types, including universal, element, class, and ID selectors. These selectors are used to target specific elements on a webpage.

Universal selectors, denoted by an asterisk (*), select all elements on a webpage. They are the most general type of selector and can be used to apply styles to all elements.

Element selectors, on the other hand, target specific HTML elements, such as paragraphs (p), headings (h1-h6), or links (a). They are more specific than universal selectors and can be used to apply styles to specific types of elements.

Class selectors, denoted by a dot (.), target elements with a specific class attribute. This allows you to apply styles to multiple elements that share the same class.

Browser support is a crucial aspect to consider when using CSS select text features like :has. Safari 15.4, introduced in March 2022, was the first major browser to support :has, followed by Chrome/Edge 105 in August 2022 and Firefox 121 in December 2023.

As of September 2024, :has has ~92% browser support, which means roughly 1 in 12 people are using an unsupported browser. This might not be ideal, but it's not a deal-breaker either. Most use cases for :has are optional, so if they don't show up for everyone, it's not a huge issue.

Fortunately, we can use feature detection to provide fallback CSS, ensuring a reasonable experience for users with legacy browsers. In fact, the author of the article used this approach to create a fallback experience that works for users with unsupported browsers.

Here's a breakdown of the browser support timeline:

Pattern matching is a fundamental concept in CSS that determines which style rules apply to elements in the document tree. It's based on patterns called selectors, which can range from simple element names to rich contextual patterns.

The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.

You can use a universal selector (*) to match any element. This is useful when you need to apply a style to all elements on the page.

Here's a breakdown of some common selector patterns:

These selectors can be used to match elements based on their position in the document tree. For example, you can use the descendant selector (E F) to match any F element that is a descendant of an E element.

You can also use attribute selectors to match elements based on their attributes. For example, you can use the attribute selector (E[foo]) to match any E element with the "foo" attribute set, regardless of its value.

A CSS selector is a chain of one or more simple selectors separated by combinators. Combinators are white space, ">", and "+".

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The elements of the document tree that match a selector are called subjects of the selector.

Here's a breakdown of the types of combinators used in CSS selectors:

A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

A simple selector can be either a type selector or a universal selector, followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.

The order in which you combine these components doesn't matter, as long as they're adjacent.

A selector is a chain of one or more simple selectors separated by combinators, which are white space, ">", and "+".

Combinators can appear between a simple selector and the next one in the chain, or between the last simple selector and a pseudo-element.

Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

In other words, each combinator adds more specificity to the selector, narrowing down the elements it matches.

The universal selector is a powerful tool in CSS, and it's written as an asterisk, "*". It matches the name of any element type, which means it can select any single element in the document tree.

The universal selector is often used in combination with other selectors to match specific elements. For example, if you want to match all elements with the attribute "lang=fr", you can use "*[lang=fr]". This is equivalent to using the universal selector by itself, as in "[lang=fr]".

In fact, when the universal selector is not the only component of a simple selector, the "*" can be omitted. This makes the code a bit more concise. For instance, "*#myid" is equivalent to "#myid", and "*.warning" is equivalent to ".warning".

Here are some examples of when the universal selector can be omitted:

Attribute selectors are a powerful tool in CSS selector syntax, allowing you to match elements based on their attributes. They can be used to select elements based on the presence or absence of a particular attribute, or to select elements based on the value of an attribute.

Attribute values must be identifiers or strings, and the case-sensitivity of attribute names and values in selectors depends on the document language. For example, the selector matches all H1 elements that specify the "title" attribute, whatever its value.

You can use attribute selectors to refer to several attributes of an element, or even several times to the same attribute. The selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus".

Multiple attribute selectors can be combined to match elements based on multiple conditions. The selector matches all SPAN elements whose "lang" attribute has the value "fr" (i.e., the language is French).

Here are some examples of attribute selectors in action:

ID selectors are a powerful tool in CSS, allowing you to target specific elements on a web page based on their ID attribute.

In HTML, all ID attributes are named "id", and what makes them special is that no two such attributes can have the same value. This means that an ID attribute can be used to uniquely identify its element.

A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier. For example, the style rule "#p123" matches the element with the ID value "p123".

ID selectors have a higher specificity than attribute selectors, which means they take precedence in the cascade. This is important to note when using ID selectors in conjunction with other selectors.

Here are some examples of ID selectors:

Note that if an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. This is a situation that could be reached using mixtures of xml:id, DOM3 Core, XML DTDs, and namespace-specific knowledge.

The first-child pseudo-class is a powerful tool in CSS that allows you to select an element that is the first child of another element. It's a simple yet effective way to target specific elements on a page.

In the CSS 2.1 specification, the :first-child pseudo-class matches an element that is the first child element of some other element. This means that if you have a P element that is the first child of a DIV element, the selector will match that P element.

The :first-child pseudo-class can be used to suppress indentation for the first paragraph of a DIV, for example. You can also use it to set the font weight to 'bold' for any EM element that is some descendant of a P element that is a first child.

Note that anonymous boxes are not part of the document tree, so they are not counted when calculating the first child. This is important to keep in mind when using the :first-child pseudo-class.

Here's an example of how to use the :first-child pseudo-class in a CSS rule:

P:first-child { font-weight: bold; }

This rule will set the font weight to 'bold' for any P element that is the first child of another element.

The :first-child pseudo-class is a useful tool to have in your CSS toolkit, and with a little practice, you can use it to create some really cool and targeted styles.