Skip to content
Related Articles

Related Articles

Improve Article

What is contextual selector in CSS ?

  • Last Updated : 27 Jul, 2021

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/descendent 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:

Without using conceptual selector

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:

Conceptual Selector in CSS

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.

Hello Geeks! Don’t stop learning now. Get hold of all the important competitive programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :