Css selectors: Difference between revisions
From wikinotes
Line 36: | Line 36: | ||
li em { ... } /* 'em' elements at any level under 'li' */ | li em { ... } /* 'em' elements at any level under 'li' */ | ||
li + em { ... } /* 'em' elements that are direct children of 'li' */ | li + em { ... } /* 'em' elements that are direct children of 'li' */ | ||
li, em /* select both 'li' and 'em' elements */ | |||
/* state */ | /* state */ |
Revision as of 21:06, 8 September 2021
Selectors determine what the following block of CSS applies to.
Documentation
w3schools css selectors reference https://www.w3schools.com/cssref/css_selectors.asp MDN css https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps MDN css selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
Selectors
/* element/class/id */ li { ... } /* elements of type 'list' */ .class { ... } /* elements of class 'class' */ #id { ... } /* elements with id 'id' */ /* attributes */ a[title] { ... } /* a elements with attribute 'title' defined */ a[href="https://foo.com"] { ... } /* a elements with attribute 'href' and value 'https://foo.com' */ /* pseudo class/element */ a:hover { ... } /* when 'a' has the 'hover' pseudo-class */ p::first-line { ... } /* the pseudo-element 'first-line' of 'p' */ /* hierarchy */ li.class { ... } /* list element of class 'class' */ #? * li em { ... } /* 'em' elements at any level under 'li' */ li + em { ... } /* 'em' elements that are direct children of 'li' */ li, em /* select both 'li' and 'em' elements */ /* state */ a:hover { ... } /* 'a' elements when under cursor */