Basic CSS selectors

In CSS, selectors are what allows you to target specific HTML elements and apply style to them. There are many selectors, which were added during evolution of Cascading Style Sheets (versions 1, 2, 3). Most basic and most used of them were added in versions 1 and 2, while CSS 3 focuses on more specizlized ones.

Element selectors

Element selectors are the most basic CSS selectors you can use: they can be used to target specific elements within a page. For example, the example below would make all paragraph text in your document red:

p { color: red; }

Classes and IDs selectors

Class and ID selectors are used to select elements which have a specific class or ID value assigned to them. For example, to select all elements in a HTML document with a class of 'spaghetti', you could use the following class selector:

.spaghetti { background-color: green; }

Similarly, to select an element in your document with an ID of 'fusilli' you can use the following syntax:

#fusilli { background-color: yellow; }

It's worth noting that, in valid HTML, no two elements should have the same ID (that's why it's an ID: it's a unique value for that element!), and many frontend web developers avoid using IDs in your CSS selectors.

These are a type of attribute selector, but have their own syntax as they were historically the primary way we target elements in CSS.

Descendant selectors

Descendant selectors can be used to select specific elements within another element. For example, to select all list items in an unordered list in your HTML document, you could use the following descendant selector:

ul li { border-bottom: 1px gray solid; }

Chained CSS selectors

Chained CSS selectors allow you to target elements in your HTML document with two or more classes assigned to them. For example, to select all elements with a class of both 'spaghetti' and 'penne':

.spaghetti.penne { background: blue; }

Note that there is no space character between the two classes above (otherwise you would be creating a descendant selector).

Adjacency selector

Adjacency selectors allow you to target elements which are adjacent (next to) each other. For example, to select all paragraphs which directly follow a h1 element, you could use the following CSS:

h1 + p { color: blue; }

The adjacency selector selects the second element listed only if it is directly next to the first element in your HTML document, and does not take effect if there is another element inbetween.

Child selectors

CSS child selectors can be used to target only the first-level child element within nested elements:

ul > li { font-weight: bold; }

This is useful if you have nested elements such as in a dropdown menu contained within an unordered list (ul) element, and only want to style the first level list items.

Short answer

  • CSS selector is a pattern, which allows you to target specific HTML elements and apply style to them.
  • Most basic selectors are: ID, class, element selectors, which can be combanied with positional selectors, such as: descendant, child, adjacency and chained selectors.

Similar articles

Comments