Selectors in CSS:
selector in css is very important to make web page good in term of look. it's make easy to target which part we want to style or change.
Type of selector
Universal selector
Individual selector
Class and I'd selector
Combined selector
Inside an element
Direct child
Sibling ~ or +
Universal selector: It's select every thing on canvas.
*{
background-color:black;
color: white;
it will change our background in black and fonts will be white.
use of this selector is change web page background color and if we want same fonts on page than we use universal selector.
Individual selector : This selector is use when we want change in tag like
,
etc. but it will change in all tag's like we use 5 "p" tag or 5 "div" than all 5 will b changeClass and I'd selector:
This selector use for id attribute in html,
<style>
#my1 {
background-color: #ef9323;
color: #FFFFFF;
}
</style>
<html>
<body>
<div id="my1">Hello</div>
</body>
</html>
only "Hello" will be change but if we use multiple
than all will change.Combined selector: When we want to select multiple tag by use just one CSS we use combined selector. syntax.
<style>
span, li {
background-color: burlywood;
}
</style>
<html>
<body>
<span>Span is just a span, nothing more</span>
<ul>
<li >item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li>item5</li>
</ul>
</body>
</html>
Only "Span is just a span, nothing more" and "item" will change.
*Inside an element *
div ul li {
background-color: #yellow;
}
<html>
<div>
<p>lorem</p>
<li>awesome</li>
<ul>
<li>highlight me 1</li>
<li>highlight me 2</li>
</ul>
</div>
in this selector only highlight me 1 and highlight me 2 change
Top comments (0)