Hi, in this tutorial, we are going to talk about the Context Selectors in CSS which are quite useful selectors throughout the CSS.
Context Selectors in CSS
What are Context Selectors and why do we need them? Context Selectors are used when the user wants to make specific rules where you want to match those tags which are in a particular context which means you want to select <p> tags which are direct children’s of <div> tag.
So, in these cases, these context selectors add Specificity to the document tree. There are 4 different selectors in this Context Selectors category.
- Indirect Descendent Selector
- Direct Descendent Selector
- Adjacent Sibling Selector
- General Sibling Selector
1. Indirect Descendent Selector ( )
Assume you want to access all strong tags that are inside the <p> tag, and no matter how deep it will be and need not be the direct ancestor, then you can use the Indirect Descendant Selector.
This Selector uses space( ) to combine two tags to operate.
// HTMl<p>This is <strong>directly</strong> within the paragraph.</p><p>This <span>is not <strong>directly</strong>within</span>the paragraph.</p>// CSSp strong { color: red;}2. Direct Descendent Selector ( > )
Assume you want to access only those paragraphs which are direct children of the body tag, then in that case you have this Direct Descendant Selector.
The Syntax for this Selector is greater than ( > ) which will be placed in between two tags.
// HTML<body><p>I have a red background</p><div><p>I do not have a red background.</p></div></body>// CSSbody > p { background-color: red;}3. Adjacent Sibling Selector ( + )
Assume you want to select some tags immediately after them. Like you want to select <p> tags that are directly after the <h1> tag and not to indirect children’s.
The Syntax for this Selector is the plus sign ( + ) which will be used between two tags.
// HTML<h1>I am a heading</h1><p>I am an adjacent paragraph so I am red!</p><p>I am not adjacent so I am not red.</p>// CSSh1 + p { color: red;}4. General Sibling Selector ( ~ )
This Selector is used to select elements that have a particular element preceding them as a sibling directly.
Assume you want to select only those <p> tags that are at the same level as <h1> tags but not which are nested down.
// HTML<p>I am not red.</p><h1>Heading 1</h1><p>This is red.</p><h2>Heading 2</h2><p>I am red too.</p><div><p>Not me as I am not a sibling given that I am one level down.</p></div>// CSSh1 ~ p { color: red;}So, these are the 4 different types of Context Selectors in CSS. Hope you guys like the tutorial, feel free to drop any comments in the comment section down below.
