Scribd
Upload
50 views

CSS - Selectors

CSS selectors allow you to target specific elements or groups of elements to style them. The main types of selectors are: 1) Type selectors which target elements by their type/tag name like <p> or <div>. 2) Class selectors which target elements with a specific class attribute value like .intro. 3) ID selectors which target elements with a unique ID attribute value like #heading. 4) Attribute selectors which target elements based on a specific attribute or attribute value they have. 5) Pseudo-class selectors which style elements when in a certain state like :hover. 6) Pseudo-element selectors which style specific parts of elements like

Uploaded by

Aminul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

CSS - Selectors

CSS selectors allow you to target specific elements or groups of elements to style them. The main types of selectors are: 1) Type selectors which target elements by their type/tag name like <p> or <div>. 2) Class selectors which target elements with a specific class attribute value like .intro. 3) ID selectors which target elements with a unique ID attribute value like #heading. 4) Attribute selectors which target elements based on a specific attribute or attribute value they have. 5) Pseudo-class selectors which style elements when in a certain state like :hover. 6) Pseudo-element selectors which style specific parts of elements like

Uploaded by

Aminul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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
CSS - Selectors about:blank

..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
CSS - Selectors about:blank

p {
color: green;
}

h1 {
text-decoration-line: underline;
}
</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 {
text-decoration-line: underline;
}

.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
CSS - Selectors about:blank

width: 300px;
text-align: center;
}

.style-p {
color: green;
font-size: 25px;
}

.style-h1 {
text-decoration-line: underline;
}
</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 {
text-decoration-line: underline;
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
CSS - Selectors about:blank

<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 {
text-decoration-line: underline;
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
CSS - Selectors about:blank

background-color: peachpuff;
}

Following example demonstrates the use of an attribute selector:

<html>
<head>
<style>
a[target] {
background-color: peachpuff;
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 {
background-color: peachpuff;
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
CSS - Selectors about:blank

a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>Styling applied to anchor element with a pseudo-class:</p>
<a href="#">Tutorialspoint</a>
</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
CSS - Selectors about:blank

<body>
<h2>Pseudo-element selector</h2>
<p>Styling applied to anchor element with a pseudo-element:</p>
<a href="#">Tutorialspoint</a>
</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
CSS - Selectors about:blank

<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
CSS - Selectors about:blank

background-color: peachpuff;
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
CSS - Selectors about:blank

#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

You might also like