Explain the term “pseudo-class” in CSS3
Last Updated :
23 Jul, 2024
Cascading Style Sheets referred to as CSS is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable.
The way elements should be rendered on screen is described by CSS. CSS applies styling to web pages. More importantly, CSS enables this styling independent of the HTML.
CSS is mainly categorized into 3 types which are as follows.
Syntax: A CSS comprises style rules that comprise a selector followed by a declaration block. These style rules are interpreted by the browser.
h1 {
font-size: 20px;
background-color: blue;
}- Selector: Selector tells about the HTML element to be styled. In this case, the selector is the “h1” element.
- Declaration: Each declaration includes a CSS property name and value, separated by a semicolon. In this case , its “font-size” and “background-color”.
Example: In this example, text inside all “p” elements will be center-aligned, it will have a font-size of 25px and a “green” color.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
font-size: 25px;
color: green;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Output:
Why use CSS?
- Basics for Web Development: The basic skill that every web developer should know is HTML and CSS.
- Reusability of Code: CSS files can be reused in multiple HTML pages where we want to apply some styling.
- Attractive Website: Adding styles to our website surely makes it more presentable to users.
- Easy to maintain code: Changes in code need to be made in a single CSS file only.
- Enhance User Experience: A simple yet beautiful UI helps users to go through the website easily.
Limitations of using CSS:
- Confusion among web browsers due to different levels of CSS like CSS, CSS1 up to CSS3.
- Cross-Browser issues, it works differently with different browsers.
- Scarcity of security because of its open text-based system.
Explain the term “pseudo-class” in reference to CSS3.
If we want to define a special state of some element, we have to use pseudo-class.
What kind of special state?
- To style an element when the mouse hovers onto it.
- To style some types of links such as visited and unvisited links.
To add an effect to existing elements based on their states, it can be combined with a CSS Selector.
Syntax:
selector : pseudo-class{
CSS property : value;
}Example: When the mouse hovers onto all “h1” elements, font-size changes to 30px.
h1 : hover{
font-size:30px;
}Categories of pseudo-classes:
- Linguistic pseudo-classes: It enables the selection of an element based on script direction or language. The examples are :dir , :lang.
- User action pseudo-classes: These are specific to user interaction in order to apply a style, such as a mouse hover. The examples are :hover, :focus.
- Resource state pseudo-classes: Applied to media elements capable of being in a state where it could be described as pause, play, etc.
- Structural pseudo-classes: It is related to the location of an element within the document tree. The examples are :last-child, :nth-child
- Input pseudo-classes: It is mainly related to input elements such as forms, it enables selecting elements based on HTML attributes and states that the field is in after and before interaction. The examples are :checked, :valid.
- Time-dimensional pseudo-classes: It is applied when interacting with something which has timing such as tracks. The examples are :future , :current
- Location pseudo-classes: It targets elements within the current document that relates to links. The examples are :scope , :visited.
Example 1: The following two examples demonstrate pseudo-classes. The :hover pseudo-class falls under the category of user action pseudo-classes. It applies when the user interacts with an element using a pointing device not necessarily activating it. When the mouse hovers on the “h1” element, the text gets underlined.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
font-size: 30px;
color: green;
}
h1:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>
Welcome to GeeksforGeeks
</h1>
</body>
</html>
Output:
Example 2: The page is loaded when the link is clicked with a color change. The :visited pseudo-class falls under the category of location pseudo-classes. It is applied to the links that the user has already visited. Styles applied by this are very limited due to privacy. The color of the link changes to “green” once we visit the “geeksforgeeks.org” website.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
width: 20%;
height: 12vh;
border: 2px solid black;
background-color: green;
color: white;
font-size: 25px;
margin: auto;
text-align: center;
}
p {
font-size: 18px;
text-align: center;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>Visit
<a href="https://www.geeksforgeeks.org/"
target="_blank">GfG</a>
official website here
</p>
</body>
</html>
Output:
Similar Reads
CSS :where() Pseudo-Class
The :where() pseudo-class is helpful for minimization of longer code in a longer CSS selector list. It avoids repetition, just replace multiple selectors with a single one. In :where() pseudo-class you can also override. Syntax: class_Name :where(html-tages) html-tag { /* CSS code */ } Selector with
2 min read
Explain the positions property in CSS
In this article, we will see what is position property, and how to use this property wisely in order to make web pages. The CSS position property is used to align the different elements in the HTML page. CSS position property plays an important role to make high-quality web pages. The CSS position p
6 min read
Explain the concept of pseudo-elements in CSS
CSS pseudo-elements are used to style specified parts of an element and are used to add special effects to some selectors. To do this, we do not need any script like javascript to add the effects. Syntax: selector::pseudo-element { property: value; } Note: The double-colon replaced the single-colon
3 min read
CSS :has() pseudo-class Selector
The CSS :has() pseudo-class is a relatively new feature that allows developers to select elements based on their children. It is a powerful tool for more specific and dynamic styling and can be used in conjunction with other pseudo-classes and selectors. The :has() pseudo-class is used to select par
2 min read
Explain the concept of specificity in CSS
Prerequisites: CSS syntax and selectors , HTML basics Specificity is an advanced algorithm used by HTML browsers to define the CSS declaration which will be the most appropriate to an HTML element. It basically calculates the weights of all the CSS selectors to determine the proper rule. The main go
3 min read
CSS :scope pseudo-class
A scope element forms a context for a block of styles. That element provides a reference point for selectors to be matched against. A scope element is defined using the scoped attribute. Styles declared with scoped attributes will be applied to all elements inside its parent element. Syntax: :scope
1 min read
CSS Pseudo-classes
A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific state or condition of an element. It is used to style elements like a hovered button, the first child of a container, or checked input fields. Syntax selector:pseudo-class { /* styles */}Interactive/Us
11 min read
Explain About The Ease Of Maintenance With CSS
Introduction: CSS is an abbreviation of Cascading Style Sheet. CSS is used to enhance the presentation of the content contained within HTML tags. CSS is in charge of a web page's appearance and feel.CSS can be used to change the color of the text, the font style, the spacing between paragraphs, the
4 min read
Use of :even and :odd pseudo-classes with list items in CSS
The:nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. It matches every element that is the nth-child. The: even and: odd pseudo-class is used with the list of items such as paragraph, article items which is basically a list content. odd: The us
2 min read
Explain CSS vendor prefixes
The process of introducing new CSS properties and HTML elements can be long and convoluted. Sometimes changes are proposed by standards committees (like the World wide web consortium (W3C)) and other times browser vendors create their properties. A property created by the W3C doesn't work until brow
3 min read