Combinator Selectors In CSS
A Combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selectors, we can include a combinator.
CSS Selectors Can be divided into Five categories:
1. Simple Selectors (Element selector, Id selector, Class selector, Universal selector)
2. Combinator Selectors (Descendant selector, child selector, sibling selector, General selector)
3. Attribute Selector (allow you to select elements by referring their attributes)
4. Pseudo-class selectors (select elements based on a certain state)
Descendant Selectors in CSS with Example:
Example 1 : Descendant Selectors ( space)
|
<!DOCTYPE html> <html> <head> <style> div p {
background-color: red;
font-style: italic; } </style> </head> <body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the
div.</p></section> </div>
<p>This para is outside of
div.</p> <p>This wont be in red
background.</p>
</body> </html> |
Output:
Child Selectors (>) in CSS with Example:
The child selector selects
all elements that are the children of a specified element.
child selector only selects immediate descendant of an ancestor.
This means that elements which are not directly a child of the specified parent element are not selected
The child selector uses an additional
symbol- an angle bracket( >) to show the relationship between two elements
Example 2 : Child Selectors ( >)
|
<!DOCTYPE html> <html> <head> <style> div > p {
background-color: red;
font-style: italic; } </style> </head> <body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the
div.</p></section>
<p>Paragraph 4 in the div.</p> </div>
<p>This para is outside of
div.</p> <p>This wont be in red
background.</p>
</body> </html> |
Output:
Adjacent Sibling Selectors (+) in CSS with Example:
Example 3 : Adjacent Sibling Selectors ( +)
|
<!DOCTYPE html> <html> <head> <style> div + p {
background-color: red;
font-style: italic; } </style> </head> <body> <div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the
div.</p></section>
<p>Paragraph 4 in the div.</p> </div> <p>This para is outside of
div.</p> <p>This wont be in red
background.</p> </body> </html> |
Output:
General Sibling Selectors (~) in CSS with Example:
The general sibling
selector selects all elements that are siblings of a specified element.
General sibling selectors selects element only if both are children of the same parent.
The general sibling selector uses an additional symbol tilde (~) to indicate the relationship between the two elements .
Example 4 : General Sibling Selectors ( +)
|
<!DOCTYPE html> <html> <head> <style> div ~ p {
background-color: red;
font-style: italic; } </style> </head> <body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the
div.</p></section>
<p>Paragraph 4 in the div.</p> </div>
<p>This para is outside of
div.</p> <H3>Welcome launchpadlwd
blog</H3> <p>This will be in red
background.</p>
</body> </html> |
Output:
Posts
0 Comments
Please do not enter any spam links in the comment box