Table of contents
What is a Selector?
Selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.
** Types of selectors in CSS.**
Universal Selector
Individual Selector
Id and Class Selector
Combined Selector
Pseudo Selector
Attribute Selector
**1. Universal Selector **
The universal selector is used as a wildcard character. It selects all the elements on the pages.
* {
background-color: yellow;
color: black;
}
**2. Individual Selector **
The individual selector is used to single and individual characters. It selects only selected characters.
body {
background-color: yellow;
color: black;
}
p {
text-align: center;
color: red;
}
**3. Id and Class Selector **
The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
#para1 {
text-align: center;
color: blue;
}
The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.
.center {
text-align: center;
color: blue;
}
**4.Combinator Selector **
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. 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 Selector**
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
- ** Child Selector (>)**
The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a<div> element:
div > p {
background-color: yellow;
}
- Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed immediately after <div> elements:
div + p {
background-color: yellow;
}
- ** General Sibling Selector (~)**
The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
div ~ p {
background-color: yellow;
}
5. Pseudo Selectors
Pseudo-class(: keyword) is a keyword concatenated with selectors to add special characteristics to that corresponding element(s). There are various pseudo-class keywords such as:
mainly we uses ::after and ::beforewhich follows:
::after
/* after */
.imp-label::after {
content: "";
display: block
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #f08b18;
}
::before
/* before */
.imp-label::before {
content: "";
display: block
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #f08b18;
}
OUTPUT
6. Attribute selectors
Attribute selectors target an element that has a specific attribute or with a specific attribute value. Here simple selectors are concatenated with enclosed square brackets and attribute/attribute condition mentioned within the square brackets. In the above HTML document we can target the input tag with password as shown in the below snippet.
input[type="password"]{
font-size: 20px;
padding: 10px 30px;
border-radius: 8px;
border: 1px solid hsl(0, 0%, 65%);
margin-bottom: 15px;
width: 100%;
margin: 6px 6px;
}