Learning about Selectors and Pseudo Classes in CSS
"Let's have some fun with CSS"
What is CSS Selectors?
Basically, Selectors in CSS are used to target the HTML element on the website that needs a particular styling. The first component of a CSS Rule is a CSS selector. It is a set of phrases and patterns that instruct the browser which HTML elements to pick in order to apply the CSS property.
Types of CSS Selectors
1. Universal Selector
The Universal Selector in CSS helps in selecting all the elements on the webpage. Typically, it is expressed as an asterisk (*) followed by a selector.
Syntax:
/* Universal Selector Syntax */
* {
property : value;
}
Example:
2. ID Selector
The CSS ID Selector is used to select an HTML element by its ID. This ID element in the HTML is always distinct in the web page. To select an ID we use a pound symbol (#) followed by a selector.
Syntax:
/* ID Selector Syntax */
#idName {
property : value;
}
Example:
3. Individual Selector
The CSS Individual tag selects the individual HTML element. It chooses every element on the page that has the same tag. Typically, it is expressed as an htmlElementName followed by a selector.
Syntax:
/* Individual Selector Syntax */
htmlElementName {
property : value;
}
Example:
4. Class Selector
The class selector is used to pick out HTML elements that have a certain class attribute.
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;
}
5. Chain Selector
In CSS combining different kinds of selectors is called Chaining Selector. For example, a paragraph p is having a class .active the CSS would look like p.active{}. 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:
6. Combined Selector
The combined selector in CSS is used to apply the same set of CSS styles to multiple HTML elements or classes or id and selectors. We generally use this selector to avoid code duplication in the CSS. We can obtain this by separating different selectors from a space-separated comma (,).
Syntax:
/* Combined Selector Syntax */
elementName,
.className,
#idName {
property : value;
}
Example:
7. Combinator Selector
A combinator is a way to show how selectors are related to each other. By using combinators, we can, target only the children of an element, or an element followed by another element on the same level, and so on.
There are four different kinds of Combinators in CSS.
1. Descendant Combinator
A Descendant Combinator selector looks for all of the same kind 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
In CSS, the Child Combinator is placed between two selectors. The child combinator is an Arrow down (>) symbol. It is used to select an element which is a direct child of its parent. For example <div> is parent element and <p> is child element, it will select all the child <p> elements of parent <div>.
Syntax:
/* Child Combinator Syntax */
parentElementName > childElementName {
property : value;
}
Example:
3. Adjacent Sibling Combinator
In CSS, the Adjacent Combinator is placed between two selectors. The adjacent combinator is a Plus (+) symbol. With the adjacent sibling selector, you can choose an element that comes right after a certain one. Elements that are siblings must have the same parent element, and the word Adjacent means Right After.
Syntax:
/* Adjacent Sibling Combinator Syntax */
selectorOne + adjacentElement {
property : value;
}
Example:
4. General Sibling Combinator
In CSS, the General Sibling Combinator is placed between two selectors. The general sibling combinator is a Plus (~) symbol.
Sibling means being on the same level, so none of them is their parents or children. The general sibling selector looks for elements that are on the same level as a given element. These are called "siblings."
Syntax:
/* General Sibling Combinator Syntax */
selector ~ adjacentElement {
property : value;
}
Example:
What is Pseudo Classes?
In CSS, a pseudo-class is a keyword that is appended to a selection to specify an element's unique state such as :hover, ::before and ::after.
Selectors can be given styles by using CSS pseudo-classes, but only if specific requirements are met. Adding a colon (:) or double colon (::) after a selector and a pseudo-class like "hover," "focus," or "active" allows you to express a pseudo-class in CSS.
Syntax:
/* Pseudo Classes Syntax */
selector:pseudoClassName {
property : value;
}
Most Popular Pseudo Classes
Although there are many CSS pseudo-classes, in this article we'll talk about some of the more popular ones. The following are some of the most popular CSS classes:
- ::before
- ::after
- :hover
1. Before
The :: before pseudo-class in CSS is used to add a pseudo-element before the chosen HTML element. To add any content straight from CSS, we use the content property.
Syntax:
/* Before Pseudo Class Syntax */
selector::before {
property : value;
}
Example:
2. After
The :: after pseudo-class in CSS is used to add a pseudo-element after the chosen HTML element. To add any content straight from CSS, we use the content property.
Syntax:
/* After Pseudo Class Syntax */
selector::after {
property : value;
}
Example:
3. Hover
When you mouse over an element, it is selected using the :hover selector. All elements, not just links, can utilize the :hover selector.
Syntax:
/* Hover Pseudo Class Syntax */
selector:hover {
property : value;
}
Example:
Resources
Source Code
So, that concludes our discussion on Selectors and Pseudo Class. Thank you so much if you made it this far, I'd love to hear your thoughts.