CSS Selectors

CSS Selectors

With CSS selectors, select the elements based on their element name, id, class, etc. Here, we will learn about element selector, class selector, id selector, and universal selector. With that, we will also see how to group CSS selectors to ease our work and minimize the code.

CSS Selectors

Let’s begin with the CSS element selector,

The CSS element selector

Under the element selector, you need to set property and value for element. Here, we will add color to all the level 2 headings,

The CSS universal selector

Under the universal selector, you need to set property and value for any element. Yes, the declaration will work for every element. Here, we will add color to any element,

The CSS ID selectors

Use the id attribute of an element to define the style rules. For selecting an element with a specific id, you need to use hash (#) character. Just mention the hash character, followed by the id of the element. Always remember, the id of the element should be unique within a web page.

Here, for an example, we will apply style rule to all the elements with id =”content”. This works for every element with id attribute set to content,

The CSS class selectors

Use the class attribute of an element to define the style rules. For selecting an element with a specific class, you need to use a period (.) character. Just mention the period character, followed by the class of the element.

Here, for an example, we will apply style rule to all the elements with class =”content”. This works for every element with class set to main.

Grouping Selectors

As the name tells, grouping selectors means to group the selectors with the same style definitions. Let’s say we have the following four elements with the same style definitions.

Now, to minimize the code, we can group the above selectors’ h1, h2, h3, p since they have the declarations. Here’s the enhanced form after grouping selectors,

Begin CSS
Adding CSS
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment