Selectors in CSS
CSS selectors are used to select any content you want to style. CSS selectors select HTML elements according to its id, class, type, attribute, etc. Selectors make it easy for us to easily target single/multiple HTML elements in the markup.
We will see four types of CSS Selectors:
- CSS Simple selectors
- CSS Element Selector
- Class Selectors
- Id Selector
- CSS Universal Selector
- CSS Combinator selectors
- Descendant selector (space)
- Child selector (>)
- Adjacent sibling selector (+)
- General sibling selector (~)
- CSS Pseudo-class selectors
- CSS Pseudo-elements selectors
- CSS Attribute selectors
CSS Simple selectors
In this selector we can select elements based on name, id, class.
CSS Element Selector
An element type selector matches all instance of the element in the document with the corresponding element type name.
<!DOCTYPE html>
<html>
<head>
<title>
element element Selector
</title>
<style>
div{
background-color:#444;
color:#ffffff; }
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p>This is my first paragraph to demonstrate css selectors</p>
<p>This is my second simple paragraph to demonstrate css selectors</p>
<div>
<h2>This is simple heading inside div </h2>
<section>this is span</section>
</div>
<footer>This is footer</footer>
</body>
</html>
Class Selectors
The class selectors can be used to select any HTML element that has a class attribute. The class selector is used with . character.
<!DOCTYPE html>
<html>
<head>
<title>.css selector</title>
<style>
.container {
color:#000000;
font-size:14px;
}
</style>
</head>
<body>
<p class=”container”> This is my paragraph </p>
<h3> class=”container”> This is my our third Heading </h3>
</body>
</html>
id Selector
The id selector is used to define style rules for a single or unique element. The id selector is used with # character.
<!DOCTYPE html>
<html>
<head>
<title>#id selector</title>
<style>
#container {
color:#000000;
text-align:14px;
}
</style>
</head>
<body>
<p id="container"> This is my paragraph </p>
<h3> class="section"> This is my our third Heading </h3>
</body>
</html>
CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
<!DOCTYPE html>
<html>
<head>
<title>
CSS Universal Selector
</title>
<style>
* {
background-color:#444;
color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p>This is my first paragraph to demonstrate css selectors</p>
<p>This is my second simple paragraph to demonstrate css selectors</p>
<div>
<h2>This is simple heading inside div </h2>
<section>this is span</section>
</div>
<footer>This is footer</footer>
</body>
</html>
The CSS grouping Selector
Grouping Selector is used when we have to make changes in more than one element.
<!DOCTYPE html>
<html>
<head>
<title>
Grouping Selector
</title>
<style>
section, footer{
background-color:#444;
color:#ffffff; }
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p>This is my first paragraph to demonstrate css selectors</p>
<p>This is my second simple paragraph to demonstrate css selectors</p>
<div>
<h2>This is simple heading inside div </h2>
<section>this is span</section>
</div>
<footer>This is footer</footer>
</body>
</html>
CSS Combinators
Between the simple selectors, we can include a combinator. There are four different combinators in CSS:
- Descendant selector (space)
- Child selector (>)
- Adjacent sibling selector (+)
- General sibling selector (~)
Descendant Selectors
Creates matching patterns based on the relationship between nested elements
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Child Selectors
A child selector is used to select only those elements that are the direct children of some element. A child selector is made up of two or more selectors separated by a greater than symbol (>).
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>
<p>Paragraph 3 in the div.</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
Adjacent Sibling Selectors
The adjacent sibling selectors can be used to select sibling elements. The adjacent sibling selector is used to select an element that is directly after another specific element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adjacent Sibling Selectors</title>
<style>
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
General Sibling Selectors
The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (∼) character. It can be written like: E1 ∼ E2, where E2 is the target of the selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS General Sibling Selectors</title>
<style>
h1 ~ p {
color: blue;
font-size: 18px;
}
ul.task ~ p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element.
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
color: yellow;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Another Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: red;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over this div element to show the p element
<p>My Paragraph</p>
</div>
</body>
</html>
CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element. Style the first letter, or line, of an element. Insert content before, or after, the content of an element.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://web.learncodeonline.i">LCO.com</a>
<a href="https://ineuron.ai/" target="_blank">ineuron</a>
</body>
</html>