CSS Selector
What is CSS Selectors?
A selectors in CSS is a part of the CSS ruleset, that is basically used to select the element you want to style. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
CSS selectors can five categories:
- Simple Selectors
- Pseudo-class selectors
- Pseudo-elements selectors
Simple Selectors:
Select elements based on name, id, class
- Universal selector:
Universal selector '*' selects all elements in a document.
<style>
* {
text-align: center;
color: blue;
}
</style>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
- Grouping Selector:
The grouping selector selects all the HTML elements with the same style definitions.
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
- Class selector:
Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".
<style>
.center {
text-align: center;
color: red;
}
</style>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
- ID selector:
Id selector consists of a prefixed "#" pound symbol before the id name of the HTML element. Id name is defined in id attribute in an HTML element. The id should be unique in the whole document. Duplicated ids can cause unpredictable behavior.
<style>
#para1 {
text-align: center;
color: red;
}
</style>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
- Descendant Selector:
The CSS descendant selector is used with a simple space applied between the parent and child elements
<style>
div p {
background-color: yellow;
}
</style>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph in the div.</p>
</body>
- Child Selector (>):
The child selector selects all elements that are the children of a specified element.
<style>
div > p {
background-color: yellow;
}
</style>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph in the div.</p>
</div>
</body>
- Adjacent Sibling Selector (+):
The next two CSS combinators you will look at are the sibling selectors. The first up of this duo is the CSS adjacent sibling selector.
<style>
div + p {
background-color: yellow;
}
</style>
<body>
<h2>Adjacent Sibling Selector</h2>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
</body>
- General Sibling Selector (~):
The general sibling selector selects all elements that are next siblings of a specified element.
<style>
div ~ p {
background-color: yellow;
}
</style>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>
<div>
<p>Paragraph 1.</p>
</div>
<p>Paragraph 2.</p
</body>
Pseudo-class selectors:
A Pseudo class in CSS is used to define the special state of an element.
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p><a class="highlight" href="css_syntax.asp">CSS</a></p>
</body>
</html>
Pseudo-elements selectors:
Pseudo-elements are keywords added to CSS selectors that apply styles to a specific part of an HTML element.
<style>
body{
text-align: center;
}
h1{
color: blue;
}
</style>
<body>
<h1> Pseudo-elements selectors </h1>
</body>
