Css selectors: Difference between revisions
From wikinotes
| (One intermediate revision by the same user not shown) | |||
| Line 15: | Line 15: | ||
= Selectors = | = Selectors = | ||
<blockquote> | <blockquote> | ||
< | element/class/id | ||
<syntaxhighlight lang="css"> | |||
li { ... } /* elements of type 'list' */ | li { ... } /* elements of type 'list' */ | ||
.class { ... } /* elements of class 'class' */ | .class { ... } /* elements of class 'class' */ | ||
#id { ... } /* elements with id 'id' */ | #id { ... } /* elements with id 'id' */ | ||
/* | li.class { ... } /* list element of class 'class' */ | ||
</syntaxhighlight> | |||
attributes | |||
<syntaxhighlight lang="css"> | |||
a[title] { ... } /* a elements with attribute 'title' defined */ | a[title] { ... } /* a elements with attribute 'title' defined */ | ||
a[href="https://foo.com"] { ... } /* a elements with attribute 'href' and value 'https://foo.com' */ | a[href="https://foo.com"] { ... } /* a elements with attribute 'href' and value 'https://foo.com' */ | ||
</syntaxhighlight> | |||
pseudo class/elements | |||
<syntaxhighlight lang="css"> | |||
a:hover { ... } /* when 'a' has the 'hover' pseudo-class */ | a:hover { ... } /* when 'a' has the 'hover' pseudo-class */ | ||
p::first-line { ... } /* the pseudo-element 'first-line' of 'p' */ | p::first-line { ... } /* the pseudo-element 'first-line' of 'p' */ | ||
</syntaxhighlight> | |||
hierarchy | |||
<syntaxhighlight lang="css"> | |||
* | * | ||
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' */ | ||
</syntaxhighlight> | |||
misc | |||
<syntaxhighlight lang="css"> | |||
li, em /* select both 'li' and 'em' elements */ | |||
</syntaxhighlight> | |||
state | |||
<syntaxhighlight lang="css"> | |||
a:hover { ... } /* 'a' elements when under cursor */ | a:hover { ... } /* 'a' elements when under cursor */ | ||
</ | </syntaxhighlight> | ||
</blockquote><!-- selectors --> | </blockquote><!-- selectors --> | ||
Latest revision as of 21:08, 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' */ li.class { ... } /* list element of class 'class' */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/elements
a:hover { ... } /* when 'a' has the 'hover' pseudo-class */ p::first-line { ... } /* the pseudo-element 'first-line' of 'p' */hierarchy
* li em { ... } /* 'em' elements at any level under 'li' */ li + em { ... } /* 'em' elements that are direct children of 'li' */misc
li, em /* select both 'li' and 'em' elements */state
a:hover { ... } /* 'a' elements when under cursor */
