A CSS selector is used to select the HTML elements you want to style. In this article, we will take a look at the types of CSS selectors with examples
CSS selectors can be categorized into 5 main categories.
- Simple Selectors
- Combination Selectors
- Pseudo Class Selectors
- Pseudo Elements Selectors
- Attribute Selectors
Here is the list of types of CSS Selectors with examples
Element Selector
This is one of the most basic selectors to use in CSS. The element selector allows you to select and style all elements with the specified element name. This way, you’ll end up writing way less code since you won’t have to use class for each element.
Class Selector
The class selector is perhaps the most commonly used CSS selector. You can define the class selector using period (.) followed by the class name. The style you write applies to every element that matches the class. You can add multiple classes to one element.
ID Selector
The ID selector is used to style a single element that has a unique ID. You can use the ID selector by using the # symbol followed by the element’s unique ID. IDs are unique to each element and hence cannot be used to style multiple elements.
If you want to earn money from freelancing read this post to start selling on fiverr: How to rank your Fiverr gig
Attribute Selector
Using an attribute selector, you can select all elements by the name or value of a given attribute and apply styling to them using [square brackets]. It can be extremely useful if you want to style point-specific elements.
Descendant Selector
Descendant selectors apply styling to only those elements that are descendants of a specified element. The syntax is *element <space> descendant*. For instance, you can apply a style to every h1 inside a div with the class name “myDiv”.
Child Selector
Child selector allows you to select all elements that are the children of a specified element. The syntax is *parent > child*. The difference between child selectors and descendant selectors is that the latter will only select direct children.
Adjacent Selector
This selector is used when you want to select the elements that immediately follow the specified element (adjacent siblings). To use this, you’d have to use the syntax “element + sibling”.
General Sibling Selector
These are less strict than adjacent sibling selectors. It allows you to select all the elements that are siblings of a specified element even if they are not directly adjacent. Rather than using ‘+’ like in the adjacent selector, we use ‘~’.
Universal Selector
It is also called the star selector and it selects everything in the document and applies styling to them. By default, your browser defines the styling to the element and when you want to change them, you can use star selector. To use it, just put a (*).
Pseudo Class Selector
If you want to style an element based on the state of a specified element such as hover or active, you can use pseudo-classes (:). There are many classes such as hover, active, visited, target, focus, and more. The syntax is ‘element:pseudo-class’.
Pseudo Element Selector
The pseudo-element selector (::) allows you to apply styling to the specific piece or fragment of the selected element. For example, style the first character, or line, of an element. The syntax is ‘selector::pseudo-element’.
nth-of-type Selector
If you want to apply a style to an ‘nth’ number of elements, this selector comes into use. Consider a scenario where you have four lists. If you want to apply CSS only on the second item of the ul, you can use the nth-of-type(n).
nth-child Selector
The nth-child(n) selector matches every element that is the nth child, regardless of the type, of its parent. n can be a number, a keyword, or a formula that will specify the position of an element among a group of siblings.
This is the end of the list if you liked this post please share it with your friends and if you have any questions please ask in the comments section.
Read About: Best Free WordPress themes
