CSS Selectors
There are many
different types of CSS selectors has allowed you to target rules to specific
elements in the HTML document.
CSS selectors
are case sensitive so they must match element name and attribute values
exactly.
Type
of Selectors
- Universal
Selector
It’s used to
apply all items in the document.
Example: *{}
Focuses on every component on the page
- Type
Selector
Names of the
elements that match.
Example h1, h2 {}
Focuses the <h1>, <h2> components.
- Class
Selector
Matches a
component whose class attribute encompasses a value that matches the one indicated
after the period (or full halt) symbol.
Example: .example
{} Focuses any elements that class attribute and value of example.
p.example{}
Focuses only <p> elements class attribute and value of example.
- Id
Selector
Matches a
component whose id attribute encompasses a value that matches the one indicated
after the pound or hash symbol.
Example #example
{} Focuses any elements that id attribute and value of example.
- Child
Selector
Matches a
component that's a coordinate child of another.
Example li
>a {} Focuses any <a> elements that child of <li> element but
does not other <a> component in the page.
- Descendent
Selector
Matches a
component that's a descendant of another indicated component (not fair a
coordinate child of that element).
Example p a {
} Focuses any <a> elements
that sit inside a<p> element, even
if other elements nested between them.
- Adjacent
Sibling Selector
Matches that
component the next sibling of another.
Example: h2+p {}
Focuses the first <p> elements after any <h2> element but
does not other <p> elements.
- General
Sibling Selector
Matches a
component that's a sibling of another, in spite of the fact that it does not
have to be the directly preceding component.
Example h2~p { } if you had two <p> elements
that are sibling of an <h2> element, this rule would apply to both.
Leave a comment
No Cmomments yet