CSS Selector

What is CSS Selector?

Selector: It is an HTML tag. The style will be applied to the tag. CSS Selectors is based on their element name, id,
and class etc.

There are various ways to represent selectors. These are given below.

The Element or Type Selectors

The element selectors select elements based on the element name. You can select all <h1> elements on a
page. Let us consider an example.

Example of Element selector

h1{
Color:white;
Background-color:red;
}

The Universal Selector

The universal selectors relatively match the name of any element type. Let us consider an example.

Example of Universal selector

* {
Color:#8BC34A;
}

The Id Selector

You can use id selector by using the id attribute of an HTML. The id an element should be unique define. (#) character is used to represent the Id of the element. Let us consider an example.

Example of Id selector

#divid{
Border:2px solid black;
Background-color:#ff82ab
}

The class Selector

The class selector selects elements with a specific class attribute. You must have to use (.) character while using class. Let us consider an example.

Example of the class selector

#divclass{
Border:1px solid black;
Background-color:#8b2252
}

The Grouping Selector

Grouping selector is used to select multiple selectors. You must have to use the separator (,) character between the element. Let us consider an example.

Example of Grouping selector

P, h1 {
Border:1px solid black;
Background-color:#00c5cd;
Text-align:center;
}

Property: It is a type of attribute of HTML. The HTML attributes are covered into CSS properties. Like color, border, margin etc.

Value: It is assigned to properties. Like #8BC34A, #fff etc.

The given above example, you can define a headline background color as follows.

h1{background-color:#8BC34A;}

Here h1(headline) is a selector, background-color is a property and #8BC34A is the value of that property.

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy