CSS - Selectors

CSS - Selectors about:blank
CSS - Selectors
CSS selectors are patterns used to select and style HTML elements on a web page.
They allow you to target specific elements or groups of elements to apply styles
like colors, fonts, margins, and more. CSS selectors are a fundamental part of
Cascading Style Sheets (CSS), which is a language used to control the
presentation and layout of web documents.
The element or elements that are selected by the selector are referred to as
subject of the selector.
Selector lists
If same CSS is used by more than one selector, then these selectors can be
combined together to form a selector list. Thus the CSS rule is applied to all the
individual selectors.
For example, if the same CSS, color: crimson is applied to p element and
.sample class, it is written as:
p {
color: crimson;
}
.sample {
color: crimson;
}
But, we can combine these two rules into one selector list, by adding a comma to
separate them as shown below:
p, .sample {
color: crimson;
}
Following syntax will be deemed invalid, as one of the selector is invalid (..sample
- is an incorrect way of defining a class).
p {
color: crimson;
1 of 11 3/17/2024, 2:39 AM
..sample {
color: crimson;
}
p, ..sample {
color: crimson;
}
A white space is acceptable before or after the comma in a selector list

declaration.
If any of the selectors in the selector list is invalid, the whole rule gets
ignored and deemed invalid.
It is advisable to define each selector in a new line, as it makes it more

legible.
CSS Selector - Type Selector

A type selector targets an HTML element, such as <h1>, <p>, etc.
p {
color: green;
}
h1 {
text-decoration-line: underline;
}
Following example demonstrates the use of a type selector:
<html>
<head>
<style>
div {
border: 5px inset gold;
width: 300px;
text-align: center;
}
2 of 11 3/17/2024, 2:39 AM
p {
color: green;
}
h1 {
}
</style>
</head>
<body>
<div>
<h1>Type selector</h1>
<p>div with border and text-aligned to center</p>
<p>paragraph with green color</p>
<p>h1 with an underline</p>
</div>
</body>
</html>
CSS Selector - Class Selector

A class selector targets an element with a specific value for its class attribute.
.style-h1 {
}
.style-p {
color: green;
font-size: 25px;
}
Following example demonstrates the use of a class selector, where .style-p,

.style-h1 and .style-div are class selectors:
<html>
<head>
<style>
.style-div {
border: 5px inset gold;
3 of 11 3/17/2024, 2:39 AM
width: 300px;
text-align: center;
}
.style-p {
color: green;
font-size: 25px;
}
.style-h1 {
}
</style>
</head>
<body>
<div class="style-div">
<h1 class="style-h1">class selector</h1>
<p class="style-p">class .style-p applied</p>
<p>No class applied on this p element</p>
</div>
</body>
</html>
CSS Selector - ID Selector

An ID selector targets an element with a specific value for its id attribute.
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
color: red;
}
Following example demonstrates the use of an id selector, where #style-p,

#style-h1 and #style-div are the id selectors applied on the elements:
<html>
4 of 11 3/17/2024, 2:39 AM
<head>
<style>
#style-div {
border: 5px inset purple;
width: 300px;
text-align: center;
background-color: lightgoldenrodyellow;
}
#style-p {
color: green;
font-size: 25px;
}
#style-h1 {
color: red;
}
</style>
</head>
<body>
<div id="style-div">
<h1 id="style-h1">ID selector</h1>
<p id="style-p">id #style-p applied</p>
<p>No id applied on this p element</p>
</div>
</body>
</html>
CSS Selector - Attribute Selector

An attribute selector targets an element based on a specific attribute or attribute
values on an element.
a[target] {
background-color: peachpuff;
}
You can also specify the element with an attribute having a specific value.
a[href="https://www.tutorialspoint.com"] {
5 of 11 3/17/2024, 2:39 AM
}
Following example demonstrates the use of an attribute selector:
<html>
<head>
<style>
a[target] {
color: blueviolet;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Attribute selector</h2>
<p>Styling applied to anchor element with target attribute:</p>
<a href="#">Tutorialspoint</a>
<a href="#" target="_blank">google</a>
<a href="#" target="_self">wikipedia</a>
</body>
</html>
CSS Selector - Pseudo-class Selector

A pseudo-class selector is used to style a specific state of an element, such as
:hover is used to style an element when hovered.
For a detailed list of pseudo-class selectors, refer this link.
a :hover {
color: green;
font-size: 2em;
}
Following example demonstrates the use of a pseudo-class selector:
<html>
<head>
<style>
6 of 11 3/17/2024, 2:39 AM
a:hover {
color: green;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>Styling applied to anchor element with a pseudo-class:</p>
</body>
</html>
CSS Selector - Pseudo-element Selector

A pseudo-element selector is used to style a specific part of an element rather
than the element itself.
For a detailed list of pseudo-element selectors, refer this link.
a::before {
content: url();
}
Following example demonstrates the use of a pseudo-element selector

(::before):
<html>
<head>
<style>
a::before {
content: url('images/smiley.png');
}
a::after {
content: " Pseudo-element ::after applied";
color: red;
background-color: chartreuse;
}
</style>
</head>
7 of 11 3/17/2024, 2:39 AM
<body>
<h2>Pseudo-element selector</h2>
<p>Styling applied to anchor element with a pseudo-element:</p>
</body>
</html>
Combinators
Combinator shows the relationship between the selectors. Two or more simple
selectors can be combined using a combinator, to form a selector. You can read
more about combinator here.
Following example demonstrates the use of a descendant selector (space) and

child combinator:
<html>
<head>
<style>
/* style applied to only div */
div {
border: 2px solid black;
width: 300px;
}
/* style applied to all li elements directly under ul */
ul li {
background-color: lightpink;
color: purple;
font-size: 1.5em;
padding: 5px;
margin-right: 15px;
}
/* style applied to all li elements that are child element to ol element */

ol > li {
background-color: bisque;
color: black;
font-size: 0.75em;
padding: 5px;
}
</style>
</head>
8 of 11 3/17/2024, 2:39 AM
<body>
<div>
<ul>
<li>Item One</li>
<li>Item Two
<ol>
<li>Nested 1</li>
<li>Nested 2</li>
</ol></li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five
<ol>
<li>Nested 3</li>
<li>Nested 4</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
CSS Selector - Universal Selector

Universal selector, denoted by an asterisk mark (*), is a special selector that
matches any and all elements in an HTML document.
/* Selects and styles all elements on the page */

* {
margin: 0;
padding: 0;
}
As per the above syntax, the universal selector is used to apply a margin and
padding of 0 to all HTML elements.
Following example demonstrates the use of a universal selector (*):
<html>
<head>
<style>
* {
9 of 11 3/17/2024, 2:39 AM
color: darkgreen;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Universal selector (*)</h1>
<div>Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p>
</div>
<p>Paragraph 3</p>
</body>
</html>
CSS Selector - & nesting selector

CSS nesting allows to nest one style rule inside another rule, with the selector of
the child rule relative to the selector of the parent rule.
The nesting selector shows the relationship between the parent and child rules.
When the nested selectors are parsed by the browser, it automatically adds
a whitespace between the selectors, thus creating a new CSS selector rule.
In situations where the nested rule needs to be attached to the parent rule
(without any whitespace), like while using the pseudo-class or compound
selectors, the & nesting selector must be prepended immediately to
achieve the desired result.
In order to reverse the context of rules, the & nesting selector can be
appended.
There can be multiple instances of & nesting selector.
Following example demonstrates the use of a & nesting selector (&):
<html>
<head>
<style>
10 of 11 3/17/2024, 2:39 AM
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
& a {
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
}
</style>
</head>
<body>
<h1>& nesting selector</h1>
<p id="sample">
Hover <a href="#">over the link</a>.
</p>
</body>
</html>
11 of 11 3/17/2024, 2:39 AM

CSS - Selectors

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS - Selectors

Uploaded by

Copyright:

Available Formats

CSS - Selectors about:blank

A white space is acceptable before or after the comma in a selector list

It is advisable to define each selector in a new line, as it makes it more

CSS Selector - Type Selector

Following example demonstrates the use of a type selector:

CSS Selector - Class Selector

Following example demonstrates the use of a class selector, where .style-p,

CSS Selector - ID Selector

Following example demonstrates the use of an id selector, where #style-p,

CSS Selector - Attribute Selector

Following example demonstrates the use of an attribute selector:

CSS Selector - Pseudo-class Selector

For a detailed list of pseudo-class selectors, refer this link.

Following example demonstrates the use of a pseudo-class selector:

CSS Selector - Pseudo-element Selector

For a detailed list of pseudo-element selectors, refer this link.

Following example demonstrates the use of a pseudo-element selector

Following example demonstrates the use of a descendant selector (space) and

/* style applied to all li elements that are child element to ol element */

CSS Selector - Universal Selector

/* Selects and styles all elements on the page */

Following example demonstrates the use of a universal selector (*):

CSS Selector - & nesting selector

There can be multiple instances of & nesting selector.

Following example demonstrates the use of a & nesting selector (&):

You might also like