This post is about various CSS selectors. In previous many posts, we have already seen these selectors, but in this post, we discuss these selectors more deeply.

The cascading style sheets (CSS) are used to style the content of the HTML document. To styles, content CSS has the following syntax.

What is a CSS selector?

HTML elements become selectors in css used to apply styles to a particular element. You can specify elements (tag) with various patterns to select some specific elements and apply styles to them.

Syntax of CSS Selector

selector
{
property:value;
}

Description of Syntax

A selector is any HTML tag to which style is applied. (<p>,<h1>,<table>,…)

Property is HTML attributes. (color, border, width,…)

The value assigned to properties. (color value can be red, #000000).

Let’s discuss selectors.

(1) Type selector

The type selector is referred to as the element name, which selects a specific element from an HTML document (like <p>,<h1>,<div>,..).

Syntax

element name
{
property-name:value;
}

Example

Selector “p” matches the <p> tag and styles applied to the content of <p>.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
p{
font-size:20pt;
color:#f00;
padding:5px;
border:2px inset #ccc;}
</style>
</head>
<body>
<h3>Type selector</h3>
<p>This paragraph is affected.This paragraph is matches with type selector "p" in CSS.</p>
<h4>This text is not affected.</h4>
</body>
</html>

Output:-

Type selector

(2) Id selector

The Id selector selects all those elements which have the id attribute specified. You can access element by unique id_name with hash (#) prefix.

Syntax

#id_name
{
property-name:value;
}

Note:-

The id attribute name can not start with a numeric value.

Example

#blue id selects <p> and <h3> elements with id attribute blue.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
#blue{
font:16pt bold;
color:#00f;}
</style>
</head>
<body>
<h3 id="blue">Id selector</h3>
<p id="blue">This paragraph is affected.</p>
</body>
</html>

Output:-

Id selector

"p#blue" id selects only <p> element with id attribute blue.

Id selector

(3) Class selector

The class selector selects only those elements which have class attributes specified. The class selector is defined by the writing period (.) before the class name.

Syntax

.class_name 
{
property-name:value;
}

Example

. background class selector applies background color to <h3> and <h4> elements that have a class background.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
.background{
background-color:#aee}
</style>
</head>
<body>
<h3 class="background">class selector</h3>
<h4 class="background">This is level4 heading.</h4>
</body>
</html>

Output:-

Class selector

You can also specify a class selector like this:

element_name.class_name 
{
property-name:value;
}

Example

Background color applied to only <h4> element with class h4.background.

Class selector

(4) Universal Selector

instead of selecting a specific element, the selector matches with any element type. This selector is called a universal selector. It is specified by an asterisk (✳️) symbol.

Syntax

*
{
property-name:value;
}

Example

All the elements are affected.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
*{
color:#fff;
background-color:#000;}
</style>
</head>
<body>
<h3>Universal selector</h3>
<p>This paragaraph is selected.</p>
<h4>This heading is also selected.</h4>
</body>
</html>

Output:-

Universal selector

(5) Descendant selector

The descendant selector selects a particular element which is lies under another element.

Syntax

element1 element2
{
property-name:value;
}

Here element1 is an outer element and element2 is an inner element (lies inside the outer element).

Example

<span> elements inside <p> element are displayed in red color.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
p span{
color:#f00;}
</style>
</head>
<body>
<h3>Descendant selector</h3>
<p>This is <span>descendant</span> <span>selector</span> example.</p>
</body>
</html>

Output:-

Descendant selector

Another example selects only <p> element and applied styles.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
.descendant p{
color:#ffcc00;
font-weight:bold;}
</style>
</head>
<body>
<h3>Descendant selector</h3>
<div class="descendant">
<h2>This is heading.</h2>
<p>This is paragraph.</p>
</div>
</body>
</html>

Output:-

Descendant selector

(6) Child selector

The selector selects only those elements that are a direct child of a parent element. the (>) symbol is used to specify a direct child.

Syntax

element 1(parent) > element 2(child)
{
property-name:value;
}

Example

For example, the color of text is red for only those <p> elements that are a direct child of div class (. child).

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
.child>p{
color:#f00;}
</style>
</head>
<body>
<h3>Child selector</h3>
<div class="child">
<p>This paragraph is affected.</p>
<p>This paragraph is affected.</p>
<div class="c1">
<p>This paragraph is not affected.</p>
</div></div>
</body>
</html>

Output:-

Child selector

(7) Adjacent sibling selector

The adjacent sibling selects an element that immediately comes after another element. The word “adjacent sibling” means the same parent immediately following.

(+) Symbol is used to specify adjacent siblings.

Syntax

element1 + element2
{
property-name:value;
}

Example

<p> elements that come after <h2> element is in blue. Other <p> elements have no effects.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
h2 + p{
color:#00c;}
</style>
</head>
<body>
<h3>Adjacent sibling selector</h3>
<h2>Heading</h2>
<p>Paragraph immediate after heading.</p>
<p>Paragraph</p>
<h2>Heading</h2>
<p>Paragraph immediate after heading.</p>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>

Output:-

Adjacent sibling selector

(8) General sibling selector

The general sibling selects all the elements which come after the specified element. General sibling selector specified by (~) symbol.

Syntax

element1 ~ element2
{
property-name:value;
}

Example

All the <p> elements that come next after <h3> elements have a red background and yellow color.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
h3 ~ p{
color:#ffff00;
background-color:#ff0000;
}
</style>
</head>
<body>
<h3>General sibling selector</h3>
<p>This is parahraph.</p>
<p>This is parahraph.</p>
<h4>Level4 heading</h4>
<p>This is parahraph.</p>
</body>
</html>

Output:-

General sibling selector

(9) Pseudo-class selector

The pseudo-class selector selects a specific element and applies special CSS effects. The Pseudo class is combined with the CSS class using the (:) symbol.

Syntax

element:pseudo-class
{
property-name:value;
}

Example

When the mouse hovers over the list of colors purple background is displayed.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
li:hover{
background-color:#c0c;
}
</style>
</head>
<body>
<h3>Pseudo class selector</h3>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>

Output:-

(10) Pseudo-element selector

The pseudo-element selector selects a specific part of a selected element. A double colon (::) is used for the pseudo-element selector.

Syntax

element::pseudo-element
{
property-name:value;
}

Example

The first letter of the list is bolder, bigger than the rest of the characters and the color is red.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
li:first-letter{
font-weight:bold;
font-size:18pt;
color:#f00;
}
</style>
</head>
<body>
<h3>Pseudo element selector</h3>
<ol>
<li>Apple</li>
<li>Cherry</li>
<li>Orange</li>
</ol>
</body>
</html>

Output:-

Pseudo element selector

(11) Attribute selector

Attribute selector applies styles to elements with particular specified attributes or attribute values.

Following rules applied to attribute selector.

[“attribute”] selector

Selects elements with specified attributes.

Syntax

element[attribute]
{
property-name:value;
}

Example

Selects all <p> elements that have the “lang” attribute specified.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
p[lang]
{
color:#0f0;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<p lang>This is paragraph.</p>
<p lang>This is paragraph.</p>
</body>
</html>

Output:-

Attribute selector

[attribute=”value”] selector

Selects all elements which have specific attribute and value.

Syntax

element[attribute=”value”]
{
property-name:name;
}

Example

Selects <p> element which has lang attribute with value “fr”.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
p[lang="fr"]
{
color:#0f0;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<p lang>This is paragraph.</p>
<p lang>This is paragraph.</p>
<p lang="fr">This is paragraph.</p>
<p lang="en">This is paragraph.</p>
</body>
</html>

Output:-

[attribute="value"] selector

[attribute~=value] selector

Selects all <p> elements with specific attributes and in value particular word specified.

Syntax

element[attribute~=value]
{
property-name:value;
}

Example

Selects all <p> elements whose attribute value contains the word “fr”. (Only space-separated list is selected, "fr-en" is not selected).

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
p[lang~="fr"]
{
color:#0f0;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<p lang>This is paragraph.</p>
<p lang>This is paragraph.</p>
<p lang="fr">This is paragraph.</p>
<p lang="en">This is paragraph.</p>
<p lang="fr-en">This is paragraph.</p>
<p lang="en fr">This is paragraph.</p>
</body>
</html>

Output:-

[attribute~="value"] selector

[attribute|=”value”] selector

Selects all elements whose attribute value contains a specified value or begins with the specified value.

Syntax

element[attribute|=”value”]
{
property-name:value;
}

Example

Selects all <p> elements in which the lang attribute contains or begins with the “fr” word.

p[lang|="fr"]
{
color:#f00;
}

Output:-

[attribute|="value"] selector

[attribute^=”value”]

Selects all elements whose attribute value starts with the specified value.

Syntax

element[attribute^=”value”]
{
property-name:value;
}

Example

Selects all <p> elements whose attribute value starts with the word “fr”.

p[lang^="fr"]
{
color:#f00;
}

Output:-

[attribute^="value"] selector

[attribute$=”value”]

Selects all elements whose attribute value end with the specified value.

Syntax

element[attribute$=”value”]
{
property-name:value;
}

Example

Selects all <p> elements whose attribute value end with the word “fr”.

p[lang$="fr"]
{
color:#f00;
}

[attribute$="value"] selector

[attribute*=”value”]

Selects all elements whose attribute value contains the specified value.

Syntax

element[attribute*="value"]
{
property-name:value;
}

Example

Selects all <p> elements whose attribute value contains “fr”.

p[lang*="fr"]
{
color:#f00;
}

Output:-

[attribute*="value"] selector

Grouping selectors

Sometimes same CSS styles are used for different types of elements, and CSS styles are repeated every time.

CSS allows grouping these selectors by using a comma between selectors.

Example

The same color (blue) and italic font are applied to <h1>,<p>, and <ul> elements.

<!DOCTYPE html>
<html>
<head>
<title>selector</title>
<style>
h1,p,ul
{
font-style:italic;
color:#00f;
}
</style>
</head>
<body>
<h1>grouping selectors</h1>
<p>paragraph</p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>

Output:-

Grouping selector

Conclusion

You can use these various types of selectors as per your requirements. The type, class, and id are basic selectors. When selectors use with combination it is called combinator selectors. (Like Adjacent sibling selector, General sibling selector, Descendant selector, and child selector).