What are contextual selectors in CSS?
Context selectors allow developers to choose different types of styles for different parts of the document. In CSS, developers can specify styles directly or by creating certain classes to specify styles. Contextual selectors will only apply styles to specified elements. The parent-child relationship between elements in a document can be called context. A context selector will have 2 or more separate selectors.
In this article, we will learn what is contextual selector in CSS and how to use it.
What is a context selector and why do we use it?
Context selectors contain two selectors, such as class or id, these are called simple selectors. Let's take a look at the syntax of the context selector so that we understand what it means and how to use it.
grammar
div{color: blue}
span{color: green}
In the above syntax, you can see that we are using any simple selector, separated by spaces. We can apply any CSS property to any specific element that we want to style, and the style will be applied to all elements with context in the entire HTML document. Let's take a look at the output to understand the selector better.
Example
Method - We will use a div tag with 2 paragraph tags inside it, which means the div will be the parent element and the paragraph will be the child element. We will use the parent element to change the color of these elements. Now, let's take a look at the code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the contextual selector</title>
<style>
div {
color: yellow;
}
p {
color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Hello everyone!!</p>
<p>How is your day going?</p>
</div>
<p>A very good morning to all the readers</p>
</body>
</html>
In the above code, we created a div, then added 2 paragraphs (tags) inside the div, and then added another paragraph outside the div element. After that, we entered the CSS section and added the div element's The color changes to "yellow" and the paragraph to "light green", which means that all paragraph elements on the HTML document will have the "light green" color. Let’s look at the output to understand what the above code does.
In the above output, you can see that the color of all the paragraphs even within the div is "Light Green". But what if we only want to change the color of one paragraph inside a div element? You may be wondering how to change the color of a paragraph inside a div, but not the color of the paragraph outside the div.
Let’s look at another way context selectors are used so that we understand the true importance of context selectors.
Syntax
Using context selectors
div p{ color: lightgreen;}
In the above syntax, you can see that we are targeting the paragraph inside the div element, not the element outside the div.
Let's look at another example so that we can hint at this property more specifically.
Example
Here, we create a paragraph tag that will be surrounded by a div tag, and we will set the color of that paragraph to be different from the paragraph outside the div. Now let's take a look at the code to understand how we will do this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the contextual selector</title>
<style>
div p {
color: lightgreen;
}
</style>
</head>
<body>
<div>
<p>Hello everyone!!</p>
<p>How is your day going?</p>
</div>
<p>A very good morning to all the readers</p>
</body>
</html>
In the above code you can see that we added 2 paragraph tags inside a div and then added another paragraph outside that div and then using the context selector only changed The color of the paragraph is inside the div instead of outside the div. Let’s look at the output to understand what the above code does.
In the output above, you can see that the two paragraphs are in "aqua" color and the paragraph outside the div element is in the default color.
Using contextual selectors, a developer can specify the tags he wants to target to apply styles and attributes.
The 2 examples above demonstrate how developers can use contextual selectors and apply styles only to specified elements.
in conclusion
Contextual selectors may seem confusing at first, but they are very useful when we want to change the style of a very specific element. These contextual selectors provide a greater sense of control to the developer as he can change the style of any element he wants to change.
In this article, we learned how to use context selector and what is the purpose of using it?
The above is the detailed content of What are contextual selectors in CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1677
14
1431
52
1334
25
1280
29
1257
24
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM
Apr 17, 2025 am 10:55 AM
In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Some Hands-On with the HTML Dialog Element
Apr 16, 2025 am 11:33 AM
This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Paperform
Apr 16, 2025 am 11:24 AM
Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but
Where should 'Subscribe to Podcast' link to?
Apr 16, 2025 pm 12:04 PM
For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Quick Gulp Cache Busting
Apr 18, 2025 am 11:23 AM
You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator
Apr 17, 2025 am 11:26 AM
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
