| Universal | All elements, optionally restricted to a specific namespace or all namespaces | *, ns|*, *|* |
| Type | All HTML tag/element name | p, div … |
| Class | All elements with a given value in the class attribute | .xyz |
| ID | The element with the given value of the id attribute | #root |
| Attribute | All elements that have a given attribute and/or the corresponding value is equal to or matches a given string | [attr], [attr=val], [attr~=regex], [attr|=val], [attr^=val], [attr$=val], [attr*=val] |
| Combination | The union of two selectors | … , … |
| Descendent | parent child | |
| Child | parent > immediateChild | |
| Sibling | Selects two siblings (both have the same parent, the second follows directly or indirectly the first) | … ~ … |
| Adjacent sibling | Same as siblings, but second must directly follow the first one | … + … |
| Column combinater | Experimental | … || … |
| Pseudo class | Select elements based on state information (most famously a:visited) | Location :any-link, :link, :visited, :local-link, :target, :target-within, :scope / User action :hover, :active, :focus, :focus-visible, :focus-within / Resource :playing, :paused / Display state: :fullscreen, :modal, :picture-in-picture / Input :autofill, :enabled, :disabled, :read-only, :read-write, :placeholder-shown, :default, :checked, :indeterminate, :blank, :valid, :invalid, :in-range, :out-of-range, :optional, :user-invalid / Tree :root, :empty, :nth-child, :nth-last-child, :first-child, :last-child, :only-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type / Functional :is(), :not(), :where(), :has() / Linguistic :dir(), :lang() / Time dimension :current, :past, :future |
| Pseudo elements | ::after, ::backdrop, ::before, ::cue, ::cue-region, ::first-letter, ::first-line, ::file-selector-button, ::grammar-error (experimental), ::marker, ::part(), ::placeholder, ::selection, ::slotted, ::spelling-error (experimental), ::target-text |
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>selector: max-width</title>
<style type='text/css'>
div { visibility: hidden; font-size: 2em }
@media (max-width: 2000px) { #_2000 { visibility: visible } }
@media (max-width: 1900px) { #_1900 { visibility: visible } }
@media (max-width: 1800px) { #_1800 { visibility: visible } }
@media (max-width: 1700px) { #_1700 { visibility: visible } }
@media (max-width: 1600px) { #_1600 { visibility: visible } }
@media (max-width: 1500px) { #_1500 { visibility: visible } }
@media (max-width: 1400px) { #_1400 { visibility: visible } }
@media (max-width: 1300px) { #_1300 { visibility: visible } }
@media (max-width: 1200px) { #_1200 { visibility: visible } }
@media (max-width: 1100px) { #_1100 { visibility: visible } }
@media (max-width: 1000px) { #_1000 { visibility: visible } }
@media (max-width: 0900px) { #_0900 { visibility: visible } }
@media (max-width: 0800px) { #_0800 { visibility: visible } }
@media (max-width: 0700px) { #_0700 { visibility: visible } }
@media (max-width: 0600px) { #_0600 { visibility: visible } }
@media (max-width: 0500px) { #_0500 { visibility: visible } }
@media (max-width: 0400px) { #_0400 { visibility: visible } }
@media (max-width: 0300px) { #_0300 { visibility: visible } }
@media (max-width: 0200px) { #_0200 { visibility: visible } }
@media (max-width: 0100px) { #_0100 { visibility: visible } }
</style>
</head>
<body>
<div id='max' >MAX</div>
<div id='_2000'>2000</div>
<div id='_1900'>1900</div>
<div id='_1800'>1800</div>
<div id='_1700'>1700</div>
<div id='_1600'>1600</div>
<div id='_1500'>1500</div>
<div id='_1400'>1400</div>
<div id='_1300'>1300</div>
<div id='_1200'>1200</div>
<div id='_1100'>1100</div>
<div id='_1000'>1000</div>
<div id='_0900'>0900</div>
<div id='_0800'>0800</div>
<div id='_0700'>0700</div>
<div id='_0600'>0600</div>
<div id='_0500'>0500</div>
<div id='_0400'>0400</div>
<div id='_0300'>0300</div>
<div id='_0200'>0200</div>
<div id='_0100'>0100</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Match children and descendants</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type='text/css'>
@media screen {
.emph {color: red}
}
@media print {
.emph {font-weight: bold}
}
</style>
</head>
<body>
These are two <span class='emph'>emphasized words</span>. They are
rendered differently on screen and when printed.
</body>
</html>
document.querySelectorAll selects all element that match a given CSS selector. Element.querySelector and Element.querySelectorAll.