What are CSS Selectors?
In CSS, selectors are used to pinpointing the HTML element on a website that needs a certain style. It is a collection of expressions and patterns that tell browsers which HTML elements to select when applying a CSS property.
Types of CSS Selectors
Universal Selector
In CSS, the Universal Selector assists in choosing every element on a webpage.
syntax:
/* Universal Selector Syntax */
* {
property: value;
}
Example:
ID Selector
The id selector is a way to select only the element with the specified id and apply styles to that element. The selector must start with a pound sign (#) and then the value of the id attribute. The browser will then look for a tag on the page that has an id attribute equal to that id.
syntax:
/* ID Selector Syntax */
#idName {
property: value;
}
Example:
Individual Selector
The CSS Individual tag selects the specific HTML element.
It chooses every element on the page that has the same tag. Typically, it is expressed as an HTML element name followed by a selector.
syntax:
/* Individual Selector Syntax */
htmlElementName {
property: value;
}
Example:
Class Selector
The class selector is used to find HTML components with a certain class property. To choose only elements with a certain class, write a period (.) followed by the name of the class.
Syntax:
/* Class Selector Syntax*/
.className {
property: value;
}
Example:
Chain Selector
Combining several types of selectors in CSS is known as Chaining Selector. For chaining, you can chain any selector and all the elements in the document that satisfies this condition will have the style.
Syntax:
/* Chaining Classes Syntax */
.classNameOne.classNameTwo {
property: value;
}
/* Chaining ID and Class Syntax */
#idName.className {
property: value;
}
/* Chaining Class, Id and Element Syntax*/
elementName.className#idName {
property : value;
}
Example:
Combined Selector
When using several HTML elements, classes, or id and selectors, the combined selector in CSS is used to apply the same set of CSS styles to all of them. To prevent CSS code duplication, we often utilise this selector. We can obtain this by separating different selectors from a space-separated comma (,).
Syntax:
/* Combined Selector Syntax */
elementName,
.className,
#idName {
property: value;
}
Example:
Combinator Selector
A combinator is a method of displaying how selectors are connected to one another. We can target only the children of an element, or an element followed by another element on the same level, and so on, by utilising combinators.
There are four different types of Combinators in CSS
1.Descendant Combinator
A Descendant Combinator selector looks for all of the same kinds of elements that are under a certain parent element. For example, if we want to select all of the <p> tags that are inside the <div> tag, we write the div selector, put a space after it, define a p tag next to it like this div p {}, and then we can apply rules.
Syntax:
/* Descendant Combinator Syntax */
parentElementName childElementName {
property : value;
}
Example:
2. Child combinator
Child Combinator placed between two selectors. The child combinator is an Arrow down > symbol. It only matches elements that the second selection matches and are direct children of elements that the first selector matches.
For example <div> is the parent element and <p> is the child element, it will select all the child <p> elements of parent <div>.
Syntax:
/* Child Combinator Syntax */
parentElementName > childElementName {
property : value;
}
Example:
3. General Sibling Combinator
The General Sibling Combinator add between two selectors. the general sibling combinator is a Plus (~) symbol. the second element follows the first and both are the same parents.
syntax:
/* General Sibling Combinator Syntax */
selector ~ adjacentElement {
property: value;
}
Example:
4. Adjacent sibling combinator
Only when the second element comes right after the first does the + combinator match it.
Syntax:
/* Adjacent Sibling Combinator Syntax */
selectorOne + adjacentElement {
property: value;
}
Example:
5. Column combinator
The column combinator (||) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.
syntax:
/* Column Combinator Syntax */
column-selector||cell-selector {
/* style properties */
}
Example:
What are Pseudo Classes?
To indicate an element's specific state, such as:hover, ::before, and::after, a pseudo-class is a term that is added to a selection in CSS.
syntax:
/* Pseudo Classes Syntax */
selector:pseudoClassName {
property: value;
}
Most Popular Pseudo Classes
1. Before
In CSS, a pseudo-element can be added before the selected HTML element using the:: before pseudo-class. We utilise the content attribute to add any material directly from CSS.
Syntax:
/* Before Pseudo Class Syntax */
selector::before {
property: value;
}
Example:
2. After
To add a pseudo-element after the selected HTML element, use the CSS:: after the pseudo-class. We utilise the content attribute to add any material directly from CSS.
Syntax:
/* After Pseudo Class Syntax */
selector::after {
property: value;
}
Example:
3. Hover
The:hover selector is used to pick an element when you move the mouse over it. All elements, not just links, can utilize the :hover, selector.
Syntax:
/* Hover Pseudo Class Syntax */
selector:hover {
property: value;
}
Example:
Our discussion of Selectors and Pseudo Class is now complete. If you have made it this far, thank you so much. I would love to hear what you think. Please like and comment on this article.