Are you wondering how CSS selectors work? No worries! This article will demonstrate a detailed understanding of CSS selectors with examples. Let’s begin with the syntax first:
Syntax
The syntax for writing a CSS selector is shown in the below-given snippet:
Here “p” is the selector that will convert the paragraph’s color into green.
Types of CSS Selectors
CSS offers various types of selectors each type owns different functionality. This article will cover the following types:
Element Selector
In CSS, the element selector is used to target the HTML elements according to their name.
For example, the following code will implement black background color with green text color to all the paragraphs using element selector:
The below-given output will demonstrate the working of the CSS element selector:
Class selector
CSS class selector is used to target the HTML elements with specific class name. The syntax of the class selector includes a period (.) followed by the class name.
In the above syntax “className” is a class selector.
Let’s consider an example that will target the heading, and the paragraph elements using the Class Selector as shown in the below code:
In this example “.style” is class selector which specifies some properties. In the body section <h3>, and both <p> elements have the class name “style”.
The below snippet will show output of the above code snippet:
id selector
In CSS, the id selector targets the HTML elements based on the id attribute. The hash sign (#) followed by the element’s id is used for the id selector.
Let’s consider an example that will implement the specified style on the HTML element with id= “style” as shown below:
The id selector implemented on the <p> element will provide the following output:
Now, you must be thinking what’s the difference between the id selector and class selector?
id is a unique identifier which means once we used the id for one element the same id can’t be used elsewhere within the same document. If we use the same id twice in a document the CSS will apply the styling to the latest one. While classes are great classifiers they are not unique in nature.
Grouping selector
The grouping selector target multiple elements with the same style. The grouping selector utilized ‘,’ between multiple selectors.
Let’s consider an example that will implement the same styling to the multiple elements as shown in the following snippet:
The following output will verify that the grouping selector applied the same styling to <h3> and <footer> elements:
Universal selector
The universal selector implements styling to all the elements of the document. A “*” sign is used to implement the universal selector. For example, the following code will apply the given style on all the HTML elements:
The above code will implement the on the whole document and as a result, we will get the following output:
Conclusion
CSS selectors find/target the HTML elements and implement some styling properties on them. There are numerous types of CSS selectors, this write-up covered a few of them like element selector and class selector based on the element name and class name of the element respectively. Each type performs different functionalities like id selector implements some action based on element’s id, grouping selector target the multiple elements, universal selector affects the whole document, and so on.
