Looking for general tips regarding CSS selectors

Question

Specifically, I struggle with understanding why certain selectors work where others don't, selector specificity, and scope.

Answer 1

Inherited style - Style that are inherited are generally related to the text styling of the document.
font property is inherited.

this is why we use the body element to attach our font styles. body is the parent of all our other html elements.

Style that are not inherited - Styles that are not inherited are usually related to the appearance of elements.
border property is a example.

Specificity - selector have different values of importance:
1 - id selectors
2 - class and pseudo class selectors
3 - element selectors

if multiple css rules conflict with one another, the most important or specific selector is the one that will apply.

how do we know wich one will be used?

1 - author inline styles
2 - author embebeded styles
3 - author external stylesheet
4 - user stylesheet
5 - default brownser stylesheet

in css the order in wich we specify our rules matters.
if a rule from tje same style sheet with the same level of specificity exists, the rule that is declared last in the css will be tje one that is applied.

Answer 2

* - the star will target every element in the page and mostly using for resetting css by zero values to margin and padding.

+ - is used to select adjacent element. But plus will only select the immediate sibling.
<div></div>
<p></p>
<p></p>

div + p {
background: blue;
}

background will affect only the first p.

> - is used to select immediate child of the element.

<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>

.outer > div {
...
}

your rules will apply only to those divs that have a class of middle since those divs are direct descendents of elements with class outer.

~ - character that separates two sequences of selector. the element represented by two sequences share the same parent in the document three.

.a ~ .b{
background-color: blue;
}

<ul>
<li class="b"> 1</li>
<li class="a"> 2 </li>
<li>3</li>
<li class="b">4</li>
<li class="b">5</li>
</ul>

.a ~ .b matches tje 4 and 5 list item because they:

are .b elements
are siblings of .a
appear after .a in html

Answer 3

Thank you both, tremendously. I greatly underestimated the complexity of selectors, but I took I good look into the documentation. Starting to make much more sense now!!!

Answer 4

Selector is nothing but only depend on the class....like heading (h) or paragraph (p)..thus things are selector....which u may consider as head of property and value...which they r working...

Answer 5

Pls how many selector does CSS have