CSS Selectors That Every Developer Must Know
What is CSS?
CSS — Cascading Style Sheet.
CSS helps to determine or describe how HTML elements are shown on the screen.
CSS also helps style HTML elements like coloring, styling, alignment, and more.
We can define layout style based on a device like small, medium screen, and large screens.
What is CSS Selector?
CSS Selector is used to selects the element from HTML document to style.
CSS Five types of selectors are available. In this section, I discuss three CSS selectors.
- Universal Selectors
- Simple Selectors
- Combinator Selectors
1) Universal Selectors
Universal Selectors is used to selects and applies the styles to all HTML elements.
Example :
CSS
*{
color:black
}
2) Simple Selectors
Simple Selectors means Select the HTML elements from DOM by using HTML element name, id, class.
Example :
HTML
<div id=”one”>Div One</div>
<div class=”two”>Div Two</div>CSS
#one{
color:red
}
.two{
color:green
}
3)Combinator Selectors
Combinators tell the relation between the selectors.
Combinator selectors mean to select the element depends on the relationship of the HTML elements.
There are four types of Combinators.
- Descendant Selector
- Child Selector
- Adjacent Sibling Selector
- General Sibling Selector
1)Descendant Selector
Descendant selector denoted by space.
The descendant selector selects and applies the styles to the descendants of a specified element.
Let see the example selects all <p> elements inside <div> elements
Example
HTML
<div>
<h5>heading 1 in the div.</h5>
<h5>heading 2 in the div.</h5>
<section><h5>heading 3 in the div.</h5></section>
</div>
<h5>heading 4. Not in a div.</h5>
<h5>heading 5. Not in a div.</h5>CSS
div h5 {
background-color: green;
}
2)Child Selector
Child Selector denoted by (>) symbol.
Child Selector selects and applies the styles to the children’s of the specific element.
Let see the example selects all <p> elements that are children of a <div> elements.
Example
HTML
<div>
<h5>heading 1 in the div.</h5>
<h5>heading 2 in the div.</h5>
<section><h5>heading 3 in the div.</h5></section>
<h5>heading 4 in the div.</h5>
</div>
<h5>heading 5. Not in a div.</h5>
<h5>heading 6. Not in a div.</h5>CSS
div > p {
background-color: green;
}
3)Adjacent Sibling Selector
Adjacent Sibling Selector is denoted by ( + ) symbol.
Adjacent Sibling Selector selects and applies the styles to the nearby or closest element to the specific elements.
Adjacent Sibling Selectors must have the same parent element.
Let see the example selects <p> element located near to <div> elements.
Example
HTML
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div><p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p><div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div><p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>CSS
div + p {
background-color: green;
}
4)General Sibling Selector
General Sibling Selector is denoted by the ( ~ ) symbol.
General Sibling Selector selects and applies the style to all the sibling’s elements next to the specific element.
Let see the example selects <p> elements that are next siblings of <div> elements
Example
HTML
<h5>Heading 1</h5>
<div>
<h5>Heading 2</h5>
</div><h5>Heading 3</h5>
<p>Some code</p>
<h5>Heading 4</h5>CSS
div ~ p {
background-color: green;
}
I think this information is helpful to you.
Thanks for reading — Don’t Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
HTML API’s That Every Developer Should Know
Originally published at https://www.attractiveaurora.com on September 6, 2021.
