CSS Selectors - What are the CSS Selectors?

CSS Syntax Types of CSS

CSS selectors use to choose specific element and apply the style to that element. Selectors separate CSS rules to define html attributes and containers. The html Class, type, id, and attribute determine HTML element selection.

There are 4 css selectors are classified.

Simple Selectors
Combinator selectors
Pseudo class selectors
Pseudo elements selectors

We will discuss below selectors in details

element Selectors
Class Selectors
Child Selectors
attribute Selector with Class
id Selector
Id Selector with Classes
div Selector
Group Selectors
multiple Selectors
Descendant Selectors

CSS Element selector

The element selector is used to selects the element inside html elements and apply the respected style to the content. It can be tagged as a <p>, <div>, <a>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <font>, <body>, <b>...

This selector is the most basic css selector, by using this we can select the element and apply the style fot that element.

Syntax

The following syntax shows the element selector in CSS

<style>

property: value;

}

</style>

<body>

<p>CONTENT</p>

</body>

Simple css element selector example

The following example shows an element selector in CSS.

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 1px solid blue;

color: red;

}

</style>

</head>

<body>

<h1> CSS SELECTOR </h1>

<p> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

Output:

CSS ID selector

This Id selector is used to select the element by using its unique id. The Id is always particular on the page. The id is set using # and the element's id

the Id selector is more fast selector compare with other css selectors

Syntax:

The following syntax shows the id selector in CSS

<style>

#id_name{

property: value;

}

</style>

<body>

<p id="id_name">CONTENT</p>

</body>

CSS Id selector Example

<!DOCTYPE html>
<html>
<head>
<style>
#_idsele {
color: yellow;
text-align: center;
Background-color: grey;
}
</style>
</head>
<body>
<h1 id="_idsele">This is the css id selector. Id is present with id name "style".</h1>
<h1>Here, id selector is not present with id name "_idsele" so it does not inherit the styling from #_idsele declarator</h1>
<p>A simple Paragraph without apply the id selector</p>
</body>
</html>

Output

CSS class selector

Selectors choose HTML components having a specified class property. If we want to apply a style to specific class then we will use class selector. The period(.) character can select a class (Full stop). The class name is next. A class cannot start with a number.

Syntax

The following syntax shows the class selector in CSS

.className {
property1: value1;
property2: value2;
….
….
propertyn: value-n;
}

CSS class selector example

<!DOCTYPE html>

<html>

<head>

<style>

.tutc{

border: 1px solid blue;

color: red;

}

</style>

</head>

<body>

<h1> CSS SELECTOR </h1>

<p class="tutc"> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

Output:

HTML universal selector

Universal selection is a CSS selector. It acts as a wildcard on elements. The selectors pick every page element.

Syntax

The following syntax shows the universal selector in CSS

<style>

property: value;

}

</style>

Simple css universal selector example

The following example shows the universal selector in CSS.

<!DOCTYPE html>

<html>

<head>

<style>

#tutor,h1{

border: 1px solid blue;

color: red;

}

background-color: grey;

color: white;

}

</style>

</head>

<body>

<h1> CSS SELECTOR </h1>

<p class="tutc"> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

Output:

CSS Group Selector

There are an important selector css have, which we called as CSS Group selector or CSS Multiple selector. In this type we can select multiple classes, ids, elements and seperate them by comma (,). Using group selectors helps shorten code. Separate group selectors with commas in the style tag

Syntax:

<style>

.class_name,h1{

property: value;

}

</style>

<body>

<h1>CONTENT</h1>

<p class="class_name">CONTENT</p>

</body>

CSS Multiple Selector or Group Selector example

The following example shows the group selector in CSS.

<!DOCTYPE html>

<html>

<head>

<style>

#tutor,h1{

border: 1px solid blue;

color: red;

}

</style>

</head>

<body>

<h1> CSS SELECTOR </h1>

<p class="tutc"> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

Output

CSS Attribute Selector:

Which is use to apply the style for respected element attribute.

Example

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

color:grey;

}

</style>

</head>

<body>

<a href="https://rrtutors”.com target="_blank">RRTutors</a>

<br>The above link is using target attribute for link, so the color will change to grey.

<br>

<a href="https://google.com">Google</a>

<br>For this we were not added target so it will remains same color after click.

</body>

</html>

Output:

CSS not selector

By using this selector we can change all the property of all the elements except resepcted one.

Ex – If we want to change h2, h3, h5 to green color but not h4, in this case we can use not selector .

Syntax

:not(h4) {
color: green;
}

Descendant Combinator:

IF we have multiple <h2> tags and we want only apply the style for <h2> which is inside <div> tag then we can use this Descendant combinator. So when we select a descendant element, then style will be applied only to the selected element.

To apply the sescendant selector we Just need to add a space between the main element and the descendant element.

Basic Syntax of descendant Combinator:

[Selector1] [Selector2]

Note : Due to performance issue it is not recommanded to use

CSS Child selector

In child selector, we can specify an element under that sub-element if that sub-element is a direct child of the main element then style will be applied to that.

Basic Syntax of Child combinator:
[parent-element] > [child-element]

Example

div > h1 {
border:2px solid red;
background-color:green;
}

Conclusion: In this css tutorial section we covered what is css selectors and what are the css selectors, what is class selector, what is id selector, what is not selector.

Article Contributed By :

Projects By category