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.

   
   



   

      
Hello everyone!!
      
How is your day going?
   
   
A very good morning to all the readers

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.

   
   



   

      
Hello everyone!!
      
How is your day going?
   
   
A very good morning to all the readers

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!