Hello World! Welcome to the first article in my CSS series, Understanding CSS Selectors, the aim of this series is to give an in-depth explanation of the basic CSS selectors as understanding them properly is key to understanding and navigating CSS easily.
CSS stands for Cascading Style Sheets which is used to add styles to documents written in a markup language. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. Selectors are integral to the CSS stylesheet, they are 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. Below is an image illustrating the common usage of CSS selectors.
According to w3schools.com, CSS selectors are divided into five different categories:
1. Basic or Simple Selectors They select elements based on element name, id or class. They include:
- Universal selector (*) that basically selects all the HTML elements on a page.
- Type selectors that select an HTML element with the specified tag name.
- Class selectors (.className) that select a group of HTML elements having the same class name.
- Id selectors (#id) that select an HTML element with a unique id.
2. Combinator Selectors These selectors make use of a combinator when used to add styles. There are four different combinators. They are:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
3. Pseudo-class Selectors These selectors are used to select and style an HTML element and define its special behaviour/state. These states cannot be defined by basic or combinator selectors. These states are defined with pseudo-classes such as :hover, :visited, :active, :focus, :nth-child(n), :root, etc.
4. Pseudo-elements Selectors These selectors are used to style specified parts of an element or to define elements that are not part of the markup. They are ::before, ::after, ::first-letter, ::first-line and ::selection.
5. Attribute Selectors These allow us to style HTML elements with certain attributes. For example
- an [input = ”type”] will select an input element of type “text”.
- an [title ~= ”flower”] will select all elements with a title attribute that contains a space-separated list of words, one of which is “flower”.
- an [class |= ”top”] will select all elements with a class attribute value that begins with “top”.
- an [class ^= ”top”] will select all elements with a class attribute value that begins with “top”. The value does not have to be a whole word.
- an [class $= ”test”] will select all elements with a class attribute value that ends with “test”. The value does not have to be a whole word.
- an [class *= ”te”] will select all elements with a class attribute value that contains “te”. The value does not have to be a whole word.
In this first article, we are going to be looking at one of the basic selectors called the Universal Selectors and Type Selectors and I’d try to make it as simple as possible.
The Universal Selector is represented by the asterisk (*) character. It is used as a wildcard to select any and all types of elements in an HTML page. If we use just the asterisk, then all the elements get selected irrespective of the parent-child relation.
If we use the asterisk while selecting a parent tag like the example below, then all the child elements will be selected.
The Type selector (sometimes referred to as an Element Selector) is represented by the corresponding node name of the element such as p, div, span, a and h1 tags. It is used to select every instance of the element attached to it on the HTML page.
It is worthy of note that the Type selectors are on the lowest level on the specificity cascade; Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. This means that almost any other styling will override the style applied via a Type Selector alone and for the Universal selector, it doesn’t hold any specificity value at all. You can read up more on CSS specificity rules by visiting Specifics on CSS Specificity by Chris Coyier and CSS Specificity explained by Paweł Grzybek.
Let's look at some practical examples of universal and type selectors, below are the HTML and CSS codes for a simple example I created.
HTML
CSS
and the output
From the output, we see that the text-alignment and the black border are a result of the style from the Universal (*) selector on line 1 since we see the effects on all the elements. The h3, div and span stylings are all type selector as we see the stylings are only particular to the element name from the HTML document; the text in the h3 tag were all made uppercase, the background colour for the div was made blue and the text colour for both p and span tag was made green and red respectively. If you look at the CSS code critically, you would come to see that the combination of the universal selector and the p tag selector could be replaced solely with the p tag as a selector.
Well, that’s all for this article, I really hope I helped you understand more about the Universal and Type selectors, we would be looking at class and ID selectors in the next article. Thank you for reading, if you found this article helpful, please do well to share, it would probably be beneficial to someone else too.
See you in the next article. Ciao ❤️🤗.