What is contextual selector in CSS ?
Last Updated :
10 Jan, 2023
In this article, we will learn about the contextual selector in CSS & understand the declaration syntax with the help of code examples.
A contextual selector is defined as a selector which considers the context where the style is to be applied. In simple words, the specified style is applied to an element only if the element is in the specified context. Context can be defined as a parent/child relationship or ancestor/descendant relationship between different parts of the document. A contextual selector is made up of two or more simple selectors separated by white space. Class, any type, ID selector is considered as a simple selector.
Descendants: It matches all elements which are contained within another element.
Syntax:
div {color: red}
p {color: red;}
For any specific HTML element, we can apply the general CSS property that is required to style that element. The below code example will illustrate the approach for applying the contextual selector.
Example: In this, there is a parent div tag and its two-child p tags. The parent <p> tag and parent <div> tag turns the elements into red as the program executes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contextual Selectors</title>
<style>
div {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Geeks For Geeks</p>
<p>A Computer Science portal for geeks.</p>
</div>
<p>What are Contextual Selectors in CSS?</p>
</body>
</html>
|
Output:
But suppose you have to turn only that paragraph into the green which is under div and not the other one outside div. You want both <p> and <div> tags to stay red for the document as a whole, but for elements inside the <div> tag, you need to turn the <p> tag into green. How can you do this?
Well, here comes the real importance of contextual selector.
Syntax:
div p{color: green;}
Example 2: In this example, any <p> tag that is inside <div> tag, will make it green (and not red like the previous syntax specified). Here, the <p> tag will be made green only in the context of <div> tag. It will be red in all other contexts.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contextual Selectors</title>
<style>
div p {
color: green;
}
</style>
</head>
<body>
<div>
<p>Geeks For Geeks</p>
<p>A Computer Science portal for geeks.</p>
</div>
<p>What are Contextual Selectors in CSS?</p>
</body>
</html>
|
Output:
From the above examples, we have seen that how a contextual selector is applied to style an element only if the element is in the specified context.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...