CSS selectors are patterns that define which HTML elements should be targeted and styled with CSS rules.
There are several types of CSS selectors, each with its own way of selecting elements.
Here are some of the most commonly used CSS selectors:
Element Selectors
Class Selectors
Id Selectors
Descendant Selectors
Child Selectors
Adjacent sibling Selectors
Pseudo-class Selectors
Pseudo-element Selectors
Attribute Selectors
Element Selectors:
The element selector selects HTML elements based on the element name (or tag)
for example p, h1, div, span, etc.
Example:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sample Heading</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt
ea voluptates modi ratione libero commodi itaque molestias facilis vero atque, voluptas iusto quisquam
quae culpa voluptate officia expedita? </p>
<b>CodeBetter</b>
</body>
</html>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt
ea voluptates modi ratione libero commodi itaque molestias facilis vero atque, voluptas iusto quisquam
quae culpa voluptate officia expedita?
CodeBetter
Class Selectors:
The class selector selects HTML elements with a specific class attribute.
Example:
HTML:
<html>
<head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea
voluptates modi ratione libero commodi itaque molestias facilis vero atque, voluptas iusto quisquam quae
culpa voluptate officia expedita? </p>
</body>
</head>
</html>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti nesciunt
ea voluptates modi ratione libero commodi itaque molestias facilis vero atque, voluptas iusto quisquam
quae culpa voluptate officia expedita?
Id Selectors:
The id selector uses the id attribute of an HTML element to select a specific
element.
Example:
HTML:
<html>
<head>
</head>
<body>
<b>CodeBetter</b>
<div id="div-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea voluptates modi ratione libero commodi itaque molestias facilis vero atque,
voluptas iusto quisquam quae culpa voluptate officia expedita? </div>
<b>CodeBetter</b>
</body>
</html>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea voluptates modi ratione libero commodi itaque molestias facilis vero atque,
voluptas iusto quisquam quae culpa voluptate officia expedita?
CodeBetter
Descendant Selectors:
This selects elements that are descendants of a specific element. It is denoted
by a space between two selectors.
Example:
HTML:
<html>
<head>
</head>
<body>
<div id="div-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
<b>nesciunt ea voluptates modi ratione libero</b> commodi itaque molestias facilis vero atque,
voluptas <b>iusto quisquam quae culpa voluptate officia</b> expedita?
</div>
<b>CodeBetter</b>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
<b>nesciunt ea voluptates modi ratione libero</b> commodi itaque molestias facilis vero atque,
voluptas <b>iusto quisquam quae culpa voluptate officia</b> expedita?
</div>
</body>
</html>
CSS:
#container b
{
Background-color:green;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea voluptates modi ratione libero commodi itaque molestias facilis vero atque,
voluptas iusto quisquam quae culpa voluptate officia expedita?
CodeBetter
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea voluptates modi ratione libero commodi itaque molestias facilis vero atque,
voluptas iusto quisquam quae culpa voluptate officia expedita?
Child Selectors:
This selects elements that are direct children of a specific element. It is denoted
by the greater-than sign (>).
Example:
HTML:
<html>
<head>
</head>
<body>
<div id="div">
Lorem ipsum <b>dolor sit amet, consectetur adipisicing elit</b>. Nemo blanditiis perspiciatis deleniti
<u><b>nesciunt ea voluptates modi ratione libero</b></u> commodi itaque molestias facilis vero atque,
voluptas <b>iusto quisquam quae culpa voluptate officia</b> expedita?</div>
</body>
</html>
CSS:
div>u
{
color: red;
}
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo blanditiis perspiciatis deleniti
nesciunt ea voluptates modi ratione libero commodi itaque molestias facilis vero atque,
voluptas iusto quisquam quae culpa voluptate officia expedita?
Adjacent sibling Selectors:
This selects an element that is immediately preceded by a specific element. It is denoted by a plus sign (+).
Example:
HTML:
<html>
<head>
</head>
<body>
<div>
<span>This is first paragraph</span>
<span>This is second paragraph</span>
</div>
<span>This is third paragraph</span>
<div>
<span>This is fourth paragraph</span>
<span>This is fifth paragraph</span>
</div>
<span>This is six paragraph</span>
<span>This is seven paragraph</span>
</body>
</html>
CSS:
div + span
{
background-color:aqua;
}
Output:
This is first paragraph This is second paragraph
This is third paragraph
This is fourth paragraph This is fifth paragraph
This is six paragraph This is seven paragraph
Pseudo-class Selectors:
This selects elements based on their state or position. Pseudo-classes are preceded by a colon (:).
This selects a specific part of an element. Pseudo-elements are also preceded by a double colon (::).
Example:
HTML:
<html>
<head>
</head>
<body>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, odio cum asperiores laboriosam neque cumque atque quas unde aliquid repellat eos enim fugiat excepturi itaque praesentium laudantium explicabo, tempora expedita adipisci illum quam repudiandae. Dolorum reprehenderit ratione quia saepe sit cum reiciendis ullam dolores maxime itaque veritatis cupiditate temporibus incidunt hic, error mollitia deleniti, molestiae ex a facilis? Nemo dolor suscipit possimus architecto, sint hic in atque sit illum qui porro officiis. Consequuntur, veniam? Distinctio atque ullam, adipisci ad totam consequatur aliquam, fugit beatae in commodi rerum iusto repellat ipsum tenetur recusandae incidunt animi. Molestias magnam dolorum vitae, tempore, blanditiis illum possimus ex accusamus quam, laudantium officiis harum laboriosam voluptates repellat rerum culpa necessitatibus veritatis libero a deserunt voluptatem magni dicta porro! Rem.</h6>
</body>
</html>
CSS:
h6::first-line
{
background-color:pink;
}
Output:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, odio cum asperiores laboriosam neque cumque atque quas unde aliquid repellat eos enim fugiat excepturi itaque praesentium laudantium explicabo, tempora expedita adipisci illum quam repudiandae. Dolorum reprehenderit ratione quia saepe sit cum reiciendis ullam dolores maxime itaque veritatis cupiditate temporibus incidunt hic, error mollitia deleniti, molestiae ex a facilis? Nemo dolor suscipit possimus architecto, sint hic in atque sit illum qui porro officiis. Consequuntur, veniam? Distinctio atque ullam, adipisci ad totam consequatur aliquam, fugit beatae in commodi rerum iusto repellat ipsum tenetur recusandae incidunt animi. Molestias magnam dolorum vitae, tempore, blanditiis illum possimus ex accusamus quam, laudantium officiis harum laboriosam voluptates repellat rerum culpa necessitatibus veritatis libero a deserunt voluptatem magni dicta porro! Rem.
Attribute Selectors:
selects elements based on their attributes. It can be used to target elements with specific attribute values.
