Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is contextual selector in CSS?
Contextual selectors allow the developer to select different types of styles for different parts of the document. In CSS, the developer can either specify styles directly or by making certain classes. The contextual selector will only apply the style to the elements which are specified. A parent-child relationship between elements in the document can be known as context. The contextual selectors will have 2 or more than 2 selectors which are separated.
In this article, we are going to have a look at what is a contextual selector in CSS and how can we use it.
What is contextual selector and why do we use it?
A contextual selector contains two selectors like a class or an id and these are known as simple selectors. Let’s have a look at the syntax for the contextual selector so that we can understand what does it mean and how can we use it.
Syntax
div{color: blue}
span{color: green}
In the above syntax, you can see that we used any simple selector and it is separated by space. We can apply any CSS property for any specific element that we want to have styles on and the styles will be applied to all the elements with the context in the whole HTML document. Let’s look at the output so that we can understand the selector better.
Example
Approach − We will be using a div tag and in which there will be 2 paragraph tags which means that the div will be the parent and the paragraph will be the child elements. We will use the parent elements to change the color of these elements. Now, let’s 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 and then added 2 paragraphs (tags) within that div and then added one more paragraph outside the div element after which we went into the CSS section and changed the color of the div element to “yellow” and the paragraph to “light green” which means that all the paragraph elements on the HTML document will have “light green” color. Let’s look at the output to understand what the above code does.
In the above output, you can see that all the paragraphs even in the div have their color “light green”. But what if we want to change the color of only one paragraph which is inside the div element. You might be wondering how can we change the color of the paragraphs which are in the div and not the paragraph which is outside the div.
Let’s look at another way to use the contextual selector, so that we can understand the real importance of the contextual selector.
Syntax
For using the contextual selector
div p{ color: lightgreen;}
In the above syntax, you can see we targeted the paragraph which is inside the div element and not the element which is outside the div.
Let’s look at another example so that we can imply the property more specifically.
Example
In this, we created a paragraph tag which will be enclosed by the div tag and we will set the color of the paragraph different from the paragraph which will be outside the div. Now let’s look at the code to understand how are we going to do it.
<!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 in one div and then added one more paragraph outside the div and then used the contextual selector to change the color of only the paragraphs which is in the div and not outside the div. Let’s look at the output to understand what the above code does.
In the above output, you can see that two paragraphs are in “light green” color and the paragraph which is outside the div element is in default color.
Using the contextual selectors, a developer can specify which tags he wants to target, to apply the styles and properties.
The 2 above examples were the demonstration of how the developer can use the contextual selector and apply the styles only to the specified element.
Conclusion
A contextual selector might look confusing at first, but it is very useful when it comes to the fact that we want to change the style of very specific elements. These contextual selectors give the developer a sense of larger control as he can change the style of any element that he wants to change.
In this article, we saw how we can use the contextual selector and what is the purpose of using it?
793 Views
