The ":" pseudo allows the selection of elements based on state information that is not contained in the document tree.
For example, "a:visited" will match all <a> elements that have been visited by the user.
While defining pseudo-classes in a <style>...</style> block, following points should be noted:
"a:hover" MUST come after "a:link" and "a:visited" in the CSS definition in order to be effective. "a:active" MUST come after "a:hover" in the CSS definition in order to be effective. Pseudo-class names are not case-sensitive.
Pseudo-classes are different from CSS classes but they can be combined.
Syntax: selector:pseudo-class {property: value;}
using CSSS classes with pseudo-classes : syntax : selector.class:pseudo-class {property: value}
Like regular classes, pseudo-classes can be chained together in a selector, as many as needed.
The :active selector is used to select and style the active link. A link becomes active when you click on it. The :active selector can be used on all elements, not only links.
Syntax: :active {css declarations;}
P.S. Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
Note: ":active" MUST come after ":hover" (if present) in the CSS definition in order to be effective!
:first-child : selects every element that is the first child of its parent
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
Syntax: :first-child {CSS declarations}
examples
I am a strong man. I am a strong man.
I am a strong man. I am a strong man.
code:
<style>
p:first-child i {background: lightcyan;}
</style>
<div>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</div>
:first-of-type : selects every element that is the first element of its parent ;
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
This is the same as :nth-of-type(1).
Syntax: :first-of-type {CSS declarations}
examples
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
code:
<style>
.special1 > p.three:first-of-type {background: lightblue;}
</style>
<div class="special1">
<p class="three">The first paragraph.</p>
<p class="three">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="three">The fourth paragraph.</p>
</div>
:focus : selects the element that has focus
The :focus selector is used to select the element that has focus.
The :focus selector is allowed on elements that accept keyboard events or other user inputs.
Syntax: :focus {CSS declarations}
examples
Click inside the text fields to see a lightbrown background:
code:
<style>
input.four:focus {background-color: burlywood;}
</style>
<div>
<p class="spec-1">Click inside the text fields to see a lightbrown background:</p>
<form>
First name: <input class="four" type="text" name="firstname"><br>
Last name: <input class="four" type="text" name="lastname">
</form>
</div>
:hover : selects links on mouse over
The :hover selector is used to select elements when you mouse over them. The :hover selector can be used on all elements, not only on links.
Syntax: :hover {CSS declarations}
P.S. use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Note: ":hover" MUST come after ":link" and ":visited" (if they are present) in the CSS definition, in order to be effective!
code
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
<div>
<p class="spec-1">Mouse over the links to see them change layout.</p>
<p class="spec-1"><a class="ex1" href="default.asp">This link changes color</a></p>
<p class="spec-1"><a class="ex2" href="default.asp">This link changes font-size</a></p>
<p class="spec-1"><a class="ex3" href="default.asp">This link changes background-color</a></p>
<p class="spec-1"><a class="ex4" href="default.asp">This link changes font-family</a></p>
<p class="spec-1"><a class="ex5" href="default.asp">This link changes text-decoration</a></p>
</div>
:in-range : selects elements with a value within a specified range
The :in-range selector selects all elements with a value that is within a specified range. The :in-range selector only works for input elements with min and/or max attributes!
Syntax: :in-range {CSS declarations}
P.S. use the :out-of-range selector to select all elements with a value that is outside a specified range.
examples
Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.
code:
<style>
input:in-range { border: 1vw dashed blue;}
</style>
<div>
<input style="margin-left:2vw;" type="number" min="5" max="10" value="7">
<p class="spec-1">Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>
</div>
:invalid : selects all elements with an invalid value
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
Syntax: :invalid {CSS declarations}
The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
P.S. use the :valid selector to select form elements with a value that validates according to the element's settings.
examples
Try typing a legal e-mail address, to see the styling disappear.
code:
<style>
input:invalid { border: 1vw solid red;}
</style>
<div>
<input style="margin-left:2vw;" type="email" value="supportEmail">
<p>Try typing a legal e-mail address, to see the styling disappear.</p>
</div>
:lang(language) : selects every element with a specified lang attribute value
The :lang() selector is used to select elements with a lang attribute with the specified value.
Syntax: :lang(language code) {CSS declarations}
Note: The lang attribute value is most often a two-letter language code, like lang="fr" (for French), or two language codes combined, like lang="fr-ca" (for Canadian French).
examples
Ik ben geboren in Belgie.
Goedendag
code:
<style>
p:lang(nl) {background: lightblue;}
</style>
<div>
<p class="spec-1">Ik ben geboren in Belgie.</p>
<p class="spec-1" lang="nl">Goedendag</p>
</div>
:last-child :selects every element that is the last child of its parent
The :last-child selector matches every element that is the last child of its parent.
Syntax: :last-child {CSS declarations}
Tip: p:last-child is equal to p:nth-last-child(1).
examples
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
code:
<style>
p:last-child {background: lightgreen;}
</style>
<div>
<p class="ten">The first paragraph.</p>
<p class="ten">The second paragraph.</p>
<p class="ten">The third paragraph.</p>
<p class="ten">The fourth paragraph.</p>
</div>
:last-of-type : selects every element that is the last element of its parent
The:last-of-type selector matches every element that is the last child, of a particular type, of its parent.
Syntax: :last-of-type {CSS declarations}
Tip: this is the same as :nth-last-of-type(1).
examples
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
code:
<style>
p.eleven:last-of-type {background: lightcyan;}
</style>
<div>
<p class="eleven">The first paragraph.</p>
<p class="eleven">The second paragraph.</p>
<p class="eleven">The third paragraph.</p>
<p class="eleven">The fourth paragraph.</p>
</div>
:link : selects all unvisited links
The :link selector is used to select unvisited links.
Syntax: :link {CSS declarations}
Note: The :link selector does not style links you have already visited.
P.S.: use the :visited selector to style links to visited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.
<style>
p.one {color: #000000;}
.one:not(p) {color: #ff0000;}
</style>
<div>
<h3 class="one">This is a heading</h3>
<p class="one">This is a paragraph.</p>
<p class="one">This is another paragraph.</p>
<div style="margin-left:2vw;" class="one">This is some text in a div element.</div>
<a class="one" style="margin-left:2vw;" href="https://www.lwitters.com" target="_blank">
Link to my website!</a>
</div>
:nth-child(n) : selects every element that is the second child of its parent
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.
Syntax: :nth-child(number){CSS declarations}
P.S.: look at the :nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.
examples
The first paragraph.
The second paragraph.
The third paragraph.
code:
<style>
.special3 > p.two2:nth-child(odd) {background: lightcyan;}
.special3 > p.two2:nth-child(even) {background: lightblue;}
</style>
<div class="special3">
<p class="two2">The first paragraph.</p>
<p class="two2">The second paragraph.</p>
<p class="two2">The third paragraph.</p>
</div>
:nth-last-of-type(n) : selects every element that is the second element of its parent, counting from the last child
The :nth-last-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent, counting from the last child. n can be a number, a keyword, or a formula.
P.S.: look at the :nth-last-child() selector to select the element that is the nth child, regardless of type, of its parent, counting from the last child.
examples
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
code:
<style>
p.six:nth-last-of-type(2) {background: lightgreen;}
</style>
<div>
<p class="six">The first paragraph.</p>
<p class="six">The second paragraph.</p>
<p class="six">The third paragraph.</p>
<p class="six">The fourth paragraph.</p>
</div>
:nth-of-type(n) : selects every element that is the second element of its parent
The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. n can be a number, a keyword, or a formula.
Syntax: :nth-of-type(number) {CSS declarations}
P.S.: look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.
examples
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
code:
<style>
p.eight:nth-of-type(2) {background: lightcyan;}
</style>
<div>
<p class="eight">The first paragraph.</p>
<p class="eight">The second paragraph.</p>
<p class="eight">The third paragraph.</p>
<p class="eight">The fourth paragraph.</p>
</div>
:only-of-type : selects every element that is the only element of its parent
The :only-of-type selector matches every element that is the only child of its type, of its parent.
Syntax: :only-of-type {CSS declarations}
examples
This is a paragraph.
This is a paragraph.
This is a paragraph.
code:
<style>
p.ten:only-of-type {background: burlywood;}
</style>
<div>
<div><p class="ten">This is a paragraph.</p></div>
<div><p class="ten">This is a paragraph.</p><p class="ten">This is a paragraph.</p></div>
</div>
:only-child" : selects every element that is the only child of its parent
The :only-child selector matches every element that is the only child of its parent.
Syntax: :only-child {CSS declarations}
examples
This is a paragraph.
This is a paragraph.
This is a paragraph.
code:
<style>
p.eleven:only-child {background: brown;}
</style>
<div>
<div><p class="eleven">This is a paragraph.</p></div>
<div><p class="eleven">This is a paragraph.</p><p class="spec eleven">This is a paragraph.</p></div>
</div>
:optional : selects elements with no "required" attribute
The :optional selector selects form elements which are optional. Form elements with no "required" attribute are defined as optional.
Syntax: :optional {CSS declarations}
Note: the :optional selector only applies to the form elements: input, select and textarea.
Tip: use the :required selector to select form elements which are required.
:out-of-range : selects elements with a value outside a specified range
The :out-of-range selector selects all elements with a value that is outside a specified range. The :out-of-range selector only works for input elements with min and/or max attributes!
Syntax: :out-of-range {CSS declarations}
Tip: use the :in-range selector to select all elements with a value that is within a specified range.
examples
Try typing a number within the given range (between 5 and 10), to see the styling disappear.
code:
<style>
input:out-of-range {border: 1vw solid blue;}
</style>
<div>
<input class="fourteen" style="margin-left:2vw;" type="number" min="5" max="10" value="17">
<p>Try typing a number within the given range (between 5 and 10), to see the styling disappear.</p>
</div>
:read-only : selects elements with a "readonly" attribute specified
The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly".
:read-write : selects with no "readonly" attribute
The :read-write selector selects form elements which are "readable" and "writeable". Form elements with no "readonly" attribute, and no "disabled" attribute are defined as "read-" and "write-able".
The :root selector matches the document's root element. In HTML, the root element is always the html element.
Syntax: :root {CSS declarations}
examples
code:
<style>
:root {background: #ff0000;}
</style>
<div>
<h1>This is a heading</h1>
</div>
:target : selects the current active element (clicked on a URL containing that anchor name)
URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.
Click on the links above and the :target selector highlight the current active HTML anchor.
New content 1...
New content 2...
code:
<style>
:target {border: 2px solid #D4D4D4; background-color: #e5eecc;}
</style>
<div>
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
</div>
:valid : selects all elements with a valid value
The :valid selector selects form elements with a value that validates according to the element's settings.
Syntax: :valid {CSS declarations}
Note: the :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.
Tip: use the :invalid selector to select form elements with a value that does not validate according to the element's settings.
The :visited selector is used to select visited links.
Syntax: :visited {CSS declarations}
P.S.: use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them.
Browsers limit the styles that can be set for a:visited links, due to security issues. Allowed styles are: color, background-color, border-color (and border-color for separate sides), outline color, column-rule-color, the color parts of fill and stroke. All other styles are inherited from a:link.
These pseudo-classes relate to links and to targeted elements within the current document.
:any-link: matches an element if the element would match either :link or :visited.
This pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every <a> or <area> element that has an "href" attribute. Thus, it matches all elements that match :link or :visited.
:link : matches links that have not yet been visited
example: see above
:visited : matches links that have been visited
example: see above
:local-link : matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.
It represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.
<div>
<a class="item-BB" href="#target">This is a link on the current page.</a><br />
<a class="item-BB" href="https://lwitters.com">This is an external link</a><br />
</div>
<style>
a.item-BB:local-link {color: green;}
</style>
:target : matches the element which is the target of the document URL.
example: see above
:target-within : matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.
This pseudo-class represents an element that is a target element or contains an element that is a target. A target element is a unique element with an id matching the URL's fragment. In other words, it represents an element that is itself matched by the ":target pseudo-class" or has a descendant that is matched by ":target".
You can target this paragraph using a URL fragment. Click on the link above to try out!
This is another paragraph, also accessible from the links above. Isn't that delightful?
code:
<div>
<h4>Table of Contents</h4>
<ol>
<li><a class="item-CC" href="#p1">Jump to the first paragraph!</a></li>
<li><a class="item-CC" href="#p2">Jump to the second paragraph!</a></li>
</ol>
<article class="text-CC">
<h4>My Fun Article</h4>
<p id="p1"> You can target <i>this paragraph</i> using a URL fragment. Click on the link above to try out!</p>
<p id="p2"> This is <i>another paragraph</i>, also accessible from the links above. Isn't that delightful?</p>
</article>
</div>
<style>
article.text-CC:target-within {background-color: gold;}
/* Add a pseudo-element inside the target element */
p#p1:target::before {font: 70% sans-serif; content: "►"; color: limegreen; margin-right: 0.25vw;}
/* Style italic elements within the target element */
p#p2:target i {color: red;}
</style>
:scope : presents elements that are a reference point for selectors to match against
Syntax : :scope {/* ... */}
examples
This is a paragraph. It is not an interesting paragraph. Sorry about that.
code:
<div>
<p id="para">This is a paragraph. It is not an interesting paragraph. Sorry about that.</p>
<p id="output"></p>
</div>
<script>
const paragraph = document.getElementById("para");
const output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.textContent = "Yep, the element is its own scope as expected!";
}
</script>
These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.
:hover : matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.
example: see here above
:active : matches when an item is being activated by the user, for example clicked on.
example: see here above
:focus : matches when an element has focus
example: see here above
:focus-visible : matches when an element has focus and the user agent identifies that the element should be visibly focused.
This pseudo-class applies while an element matches the ":focus pseudo-class" and the "UA (User Agent)"" determines via heuristics that the focus should be made evident on the element. Many browsers show a "focus ring" by default in this case.
:focus-within : matches an element to which ":focus" applies, plus any element that has a descendant to which ":focus applies".
This pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.
:current : represents the element or ancestor of the element that is being displayed.
This pseudo-class selector is a time-dimensional pseudo-class that represents an element or the ancestor of an element that is currently being displayed. For example, this pseudo-class can be used to represent a video that is being displayed with captions by WebVTT.
Syntax : :current{/*...*/}
:past : represents an element that occurs entirely before the ":current" element.
The "":past CSS pseudo-class selector" is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches "":current". For example in a video with captions which are being displayed by WebVTT.
Syntax : :past {/* ... */}
:future : represents an element that occurs entirely after the ":current element.<
This selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches ":current". For example in a video with captions which are being displayed by WebVTT.
These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.
:playing : represents a media element that is capable of playing - such as "audio" or "video" - when that element is playing.
A resource is considered to be playing if the user explicitly initiates playback. It is also considered playing when the element is explicitly in a playing state but temporarily paused due to reasons unrelated to user intent. In such cases, the playback will automatically resume once the underlying reason, such as a "buffering" or "stalled" state, is resolved.
Syntax : :playing{/*...*/}
:paused : represents a media element that is capable of playing - such as "audio" or "video" - when that element is paused.
A resource is paused if the user explicitly paused it, or if it is in a non-activated or other non-playing state, like "loaded, hasn't been activated yet."
These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.
:autofill : matches when an <input> has been autofilled by the browser.
The class stops matching if the user edits the field.
:checked : matches when elements such as checkboxes and radiobuttons are toggled on.
example, see above
:indeterminate : matches when UI elements are in an indeterminate state
This pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML "indeterminate attribute" set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
Syntax : :indeterminate{/*...*/}
examples
code:
<div>
<fieldset>
<legend>Checkbox</legend>
<div>
<input class="item-ABC" type="checkbox" id="checkbox" />
<label for="checkbox">This checkbox label starts out lime.</label>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div>
<input class="item-ABC" type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1">First radio label starts out lime.</label>
</div>
<div>
<input class="item-ABC" type="radio" id="radio2" name="radioButton" value="val2" />
<label for="radio2">Second radio label also starts out lime.</label>
</div>
</fieldset>
</div>
<style>
input:indeterminate + label {background: lime;}
</style>
<script>
const inputs = document.getElementsByClassName("item-ABC");
for (let i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</script>
:blank : matches a user-input element which is empty, containing an empty string or other null input.
These pseudo-classes relate to the location of an element within the document tree.
:root : represents an element that is the root of the document.
In HTML this is usually the <html> element.
example, see above
:empty : represents an element with no children other than white-space characters.
example, see above
:nth-child : uses An+B notation to select elements from a list of sibling elements.
example, see above
:nth-last-child : uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list..
example, see above
:first-child : matches an element that is the first of its siblings
example, see above
:last-child : matches an element that is the last of its siblings
example, see above
:only-child : matches an element that has no siblings
For example a list item with no other list items in that list.
example, see above
:nth-of-type : uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.
example, see above
:nth-last-of-type : uses An+B notation to select elements from a list of sibling elements that match a certain type, counting backwards from the end of the list.
example, see above
:first-of-type: matches an element that is the first of its siblings, and also matches a certain type selector.
example, see above
:last-of-type : matches an element that is the last of its siblings, and also matches a certain type selector.
example, see above
:only-of-type: matches an element that has no siblings of the chosen type selector.
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
/* Selects any paragraph inside a header, main or footer element that is being hovered */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* The code on the left is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
Older browsers support this functionality as ":matches()", or through an older, prefixed pseudo-class — ":any()", including older versions of Chrome, Firefox, and Safari. ":any()" works in exactly the same way as :matches()/:is(), except that it requires vendor prefixes and doesn't support complex selectors.
The ":where()" CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. Anything that ":is()" can do regarding grouping, so can ":where()". This includes being used anywhere in the selector, nesting, and stacking them.
The ":where()" pseudo selector in CSS is functionally identical to the ":is()" pseudo selector in that it takes a comma-separated list of selectors to match against, except that where ":is()" takes the most specific among them as the specificity of that whole part, the specificity of ":where()" is always zero (0).
":is()" and ":where()" accept a forgiving selector list.
In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using ":is()" or ":where()", instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.
examples
This is my header paragraph
This is my first
list item
This is my second
list item
code:
<div>
<header><p>This is my header paragraph</p></header>
<main">
<ul>
<li><p>This is my first</p><p>list item</p></li>
<li><p>This is my second</p><p>list item</p></li>
</ul>
</main>
<footer><p>This is my footer paragraph</p></footer>
</div>
<style>
:is(header, main, footer) p:hover {color: red; cursor: pointer;}
</style>
The :is() pseudo-class can greatly simplify your CSS selectors. It is particularly useful when dealing with HTML5 sections and headings. Since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky.
use cases
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :where(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
Each of the above selector examples demonstrates the flexibility of these two functional pseudo-classes. To find areas of your code that could benefit from :is() or :where(), look for selectors with multiple commas and selector repetition.
examples
examples
What it is used for!
CSS The :where() pseudo-class
A serious portal for web developments.
open the door to example-based learning and understanding
code:
<div>
<h4 style="color:green;">What it is used for!</h4>
<h5>CSS The :where() pseudo-class</h5>
<div class="mine">
<p><em>A serious portal for web developments.</em></p>
</br>
<section><em>open the door to example-based learning and understanding</em></section>
</div>
</div>
<style>
/* CSS selector with :where() psuedo-class */
.mine :where(section, p) em {background: green; color: white; margin-left: 2vw; }
</style>
<div class="spec-1">
<article>
<h3>:is()-styled links</h3>
<section class="is-styling">
<p>Here is my main content.
This <a href="https://mozilla.org">contains a link</a>.
</section>
<aside class="is-styling">
<p>Here is my aside content.
This <a href="https://developer.mozilla.org">
also contains a link</a>.
</aside>
<footer class="is-styling">
<p>This is my footer, also containing
<a href="https://github.com/mdn">
a link</a>.
</footer>
</article>
<article>
<h3>:where()-styled links</h3>
<section class="where-styling">
<p>Here is my main content.
This <a href="https://mozilla.org">
contains a link</a>.
</section>
<aside class="where-styling">
<p>Here is my aside content. This <a
href="https://developer.mozilla.org">
also contains a link</a>.
</aside>
<footer class="where-styling">
<p>This is my footer, also containing <a
href="https://github.com/mdn">
a link</a>.
</footer>
</article>
</div>
<style>
:is(section.is-styling, aside.is-styling, footer.is-styling) a
{color: red;}
:where(section.where-styling, aside.where-styling,
footer.where-styling) a{color: orange;}
footer a {color: blue;}
</style>
:where() and class
First list no class
List Item 1
List Item 2
Second list with class
List Item 1
List Item 2
Third list with class
List Item 1
List Item 2
code:
<div>
<div>
<h3>First list no class</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>
<div>
<h3>Second list with class</h3>
<ol class="second-list">
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>
<div>
<h3>Third list with class</h3>
<ol class="third-list">
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
</div>
</div>
<style>
.second-list {list-style-type: disc;}
:where(ol[class]) {list-style-type: none;}
.third-list{list-style-type: square;}
</style>
The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the "negation pseudo-class".
Syntax: :not(selector) {css declarations;}
example:
/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}
The :not() pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a pseudo-element.
There are several unusual effects and outcomes when using :not() that you should keep in mind when using it:
The :not() pseudo-class may not be nested, which means that :not(:not(...)) is invalid.
Useless selectors can be written using this pseudo-class. For example, :not(*) matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
This pseudo-class can increase the specificity of a rule. For example, "#foo:not(#bar)" will match the same element as the simpler "#foo", but has a higher specificity.
:not(.foo) will match anything that isn't .foo, including <html> and <body>.
This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, "body :not(table) a" will still apply to links inside of a table, since <tr> will match with the :not() part of the selector.
Using two selectors at the same time is not yet supported in all browsers. Example: :not(.foo, .bar). For wider support you could use, :not(.foo):not(.bar)
Example:
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
<span class="foo">foo inside h2</span>
<span class="bar">bar inside h2</span>
</h2>
<style>
.fancy {text-shadow: 2px 2px 3px gold;}
/* <p> elements that are not in the class `.fancy` */
p:not(.fancy) {color: green;}
/* Elements that are not <p> elements */
body :not(p) {text-decoration: underline;}
/* Elements that are not <div> and not <span> elements */
body :not(div):not(span) {font-weight: bold;}
/* Elements that are not <div>s or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(div, .fancy) {text-decoration: overline underline;}
/* Elements inside an <h2> that aren't a <span> with a class of foo. */
/* Complex selectors such as an element with a class are not well supported yet. */
h2 :not(span.foo) {color: red;}
</style>
The ":focus" CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
The ":focus" selector is allowed on elements that accept keyboard events or other user inputs.
examples
code:
<div class="special">
<div class="special" style="margin-left:5vw;"><input class="red-input" value="I'll be red when focused."></div>
<div class="special" style="margin-left:5vw;"><input class="blue-input" value="I'll be blue when focused."></div>
</div>
<style>
.red-input:focus {background: yellow; color: red;}
.blue-input:focus {background: yellow; color: blue; }
</style>
Click inside the text fields to see a green background:
Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:
Search:
code:
<div class="special">
<p class="spec-1" style="margin-left:5vw;">Set the width of the input field to 100 pixels. However, when the input
field gets focus, make it 250 pixels wide:</p>
<p class="spec-1" style="margin-left:5vw;"> Search: <input class="one" type="text" name="search"></p>
</div>
<style>
input.one {width: 10vw; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out;}
input.one:focus {width: 25vw;}
</style>
:focus-visible
The ":focus-visible" pseudo-class (also known as the "Focus-Indicated" pseudo-class) is a native CSS way to style elements that are in focus and need a visible indicator to show focus.
The ":focus-visible" pseudo-class applies while an element matches the ":focus" pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.). This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).
In the example below, the ":focus-visible" selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with ":focus".
<div class="special">
<custom-button style="margin-left:5vw;" tabindex="0" role="button">Click Me</custom-button>
</div>
<style>
custom-button {display: inline-block; margin: 1vw;}
custom-button:focus {/* Provide a fallback style for browsers that don't support :focus-visible */
outline: 0.2vw solid red; background: lightgrey;}
custom-button:focus:not(:focus-visible) {/* Remove the focus indicator on mouse-focus for browsers that do support
:focus-visible */background: transparent;}
custom-button:focus-visible {/* Draw a very noticeable focus style for keyboard-focus on browsers that do support
:focus-visible */ outline: 0.4vw dashed darkorange; background: transparent;}
</style>
:focus-within
The ":focus-within" CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the ":focus" pseudo-class or has a descendant that is matched by ":focus" (this includes descendants in shadow trees).
This selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.
The :nth-child() and :nth-last-child() pseudo-class selectors
With the :nth-child() pseudo-class selector it is possible to select elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select.
:nth-child(2) : select the 2nd child.
:nth-child(2n) : select all even children (2nd, 4th, 6th, 8th, and so on).
:nth-child(2n+1) : select all odd children (1st, 3rd, 5th, 7th, and so on).
The An+B notation defines an integer step (A) and offset (B), and represents the An+Bth elements in a list, for every positive integer or zero value of n, with the first element in the list having index 1 (not 0).
For values of A and B greater than 0, this effectively divides the list into groups of A elements (the last group taking the remainder), and selecting the Bth element of each group.
The An+B notation also accepts the "even" and "odd" keywords, which have the same meaning as 2n and 2n+1, respectively.
When of S is specified, the An+B logic is only applied onto elements that match the given selector list S. This essentially means that you can prefilter children before An+B does its thing.
:has() pseudo-class : a powerful new CSS capability
The ":has()" selector in CSS allows to style a parent element if it contains a specific child element. It allows developers to apply styles to parent elements based on specific conditions met by their descendants. In other words, it can style an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element.
With :has(), you can apply styles by checking to see if a parent element contains the presence of specific children, or if those children are in a specific state. This means, we essentially now have a parent selector, which takes on the "specificity" of the most specific selector in its arguments (the same way as :is() and :not() do).
If the :has() pseudo-class itself is not supported in a browser, the entire selector block will fail unless :has() is in a forgiving selector list, such as in :is() and :where().
The :has() pseudo-class cannot be nested within another :has(). This is because many pseudo-elements exist conditionally based on the styling of their ancestors and allowing these to be queried by :has() can introduce cyclic querying.
Pseudo-elements are also not valid selectors within :has() and pseudo-elements are not valid anchors for :has().
Logical operations
The :has() relational selector can be used to check if one of the multiple features is true or if all the features are true. By using comma-separated values inside the :has() relational selector, you are checking to see if any of the parameters exist. x:has(a, b) will style x if descendant a OR b exists. By chaining together multiple :has() relational selectors, you are checking to see if all of the parameters exist. x:has(a):has(b) will style x if descendant a AND b exist.
Syntax examples
/* Style div only if it contains an image */
div:has(img) {border: 2px solid blue;}
/* Style a table row if it contains a cell with a specific class */
tr:has(td.highlight) {background-color: yellow;}
.bento-card:has(button:focus-visible) { outline: 2px solid var(--color-primary);}
/* Select section elements that have an h1 element inside */
section:has(h1) {background-color: gold; }
/* Select section elements that have an element with class 'funfact' inside */
section:has(.funfact) {color: blue;}
/* Select li elements that have checked input element inside */
ul li:has(input:checked) { border: 2px solid maroon;}
Examples:
Morning Times
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Morning Times
Delivering you news every morning
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
code:
<div>
<section>
<article>
<h4>Morning Times</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article>
<h4>Morning Times</h4>
<h5>Delivering you news every morning</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
</section>
</div>
<style>
h4, h5 {margin: 0 0 1vw 0;}
h4:has(+ h5) {margin: 0 0 0.25vw 0;}
</style>
Morning Times
Delivering you news every morning
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Morning Times
Delivering you news every morning
8:00 am
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
code:
<div>
<section>
<article>
<h4>Morning Times</h4>
<h5>Delivering you news every morning</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article>
<h4>Morning Times</h4>
<h5>Delivering you news every morning</h5>
<h6>8:00 am</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
</section>
</div>
<style>
h4, h5, h6 {margin: 0 0 1vw 0;}
:is(h4, h5, h6):has(+ :is(h4, h5, h6)) { margin: 0 0 0.25vw 0;}
</style>
code:
<div class="frame-1">
<p>
Lorem Ipsum is that it has a more-or-less normal distribution of
letters,<a href="/">as opposed to using 'Content here, content
here', making it look like readable English.</a>
</p>
</div>
<style>
.frame-1 > p:has(a) {font-size: 20px;}
</style>
<ul>
<li> <label> <input type="radio" name="source" />Google</label> </li>
<li><label> <input type="radio" name="source" />Word of Mouth</label></li>
<li><label> <input type="radio" name="source" />Other</label></li>
</ul>
<style>
ul li input:checked {accent-color: #f806e4;}
ul li:has(input:checked) { border: 2px solid #f806e4;}
</style>
This paragraph is not under the div.set element. As it is not the child element of div
Even This paragraph is under the div.set element.
This paragraph is not under the div.set element.
This paragraph is not under the div.set element.
code:
<div>
<div class="set">
<p>This paragraph is under the div.set element</p>
<p>This paragraph2 is under the div.set element. </p>
<section><p>This paragraph is not under the div.set
element. As it is not the child element of div</p></section>
<p> Even This paragraph is under the div.set element. </p>
</div>
<p>This paragraph is not under the div.set element. </p>
<p>This paragraph is not under the div.set element. </p>
</div>
<style>
.set{width: 40vw;}
div .set > p {background-color: salmon; font-size : 1.2vw; padding: .3vw;}
</style>
<article>
<div class="two">Exam Details</div>
<div class="two"><p>Exam begins at 11AM.</p></div>
<span><div class="two"> Do not bring cell phone.</div>
</span>
<div class="two">
<div>Candidates should reach the center till 10:45.
</div>
<br/>
The candidates need to be bring the Admit Card.
</div>
</article>
<style>
article > div.two { border: dashed midnightblue; width: 85%;
& p {font-size: 1.5vw; font-style: italic; box-shadow: inset 0 0 .8vw orange;}
}
</style>
:first-child pseudo-class
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.
Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.
First Child so CSS styling applicable here.
Second Child so CSS styling NOT applicable here.
style applied here - 1st child in div - - No style here - 2nd child in div
bread - 1st child
butter - 2nd child
Egg - 3rd child
code:
<div>
<div id="g">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a
urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus
adipiscing porttitor.</p>
<p>Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod
nulla id nulla suscipit
sollicitudin.</p>
</div>
<br>
<div id="h">
<p >First Child so CSS styling applicable here.</p>
<p >Second Child so CSS styling NOT applicable here.</p>
</div>
<br>
<div id="i">
<em>style applied here - 1st child in div - - </em>
<em>No style here - 2nd child in div</em><br>
</div>
<br>
<ol id="j">
<li>bread - 1st child </li>
<li>butter - 2nd child </li>
<li>Egg - 3rd child </li>
</ol>
</div>
<style>
#i, #j{margin-left: 1vw; }
#g p:first-child{color:red;}
#h p:first-child {padding:0.5vw; border: 2px solid red; display: block; width: 40vw;}
#i em:first-child {text-align:center; padding:0.5vw; border:
2px solid red;}
#j li:first-child{text-decoration: red wavy underline;}
</style>
:last-child pseudo-class
This text isn't selected.
This text is selected!
This text isn't selected.
This text isn't selected: it's not a `p`.
main menu - layout
Home
About
Contact
Members
code:
<div>
<div id="last">
<p>This text isn't selected.</p>
<p>This text is selected!</p>
</div>
<br>
<div id="last-2">
<p>This text isn't selected.</p>
<h3>This text isn't selected: it's not a `p`.</h3>
</div>
<br>
<p style="font: 1.25vw sans-serif; color:black;">main menu - layout</p>
<ul class="main-menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Members</li>
</ul>
</div>
<style>
#last .afstand{margin-left: -5vw;}
#last p:last-child {color: lime;background-color: black; padding: 5px; width: 40vw;}
#last-2 h3{margin-left: 5vw;}
li {list-style: none; display: inline; padding: 20px;font-family: arial;}
.main-menu {margin-left: 5vw;background: #2d7484;color: #fff;padding: 20px;max-width: 40vw;}
.main-menu :not(:last-child) {border: solid 1px #ddd;color: #ea9e12;}
</style>
<div>
<div class="visit">
<a href="#test-visited-link">Have you visited this link yet?</a><br>
<a href="">You've already visited this link.</a>
</div>
<section>
<p><a href="https://lwitters.com" clas="lwitters">This link goes to my website.
After it's been visited, it will turn orange.</a></p>
<p><a href="https://www.wikipedia.com" class="wikipedia">This link goes to Wikipedia.
After it's been visited, its border will turn black.</a></p>
<p><a href="https://www.google.com" class="google">This link goes to Google.
After it's been visited, it will turn white and the background will turn orange. </a></p>
</section>
</div>
<style>
.visit a {background-color: white;border: 1px solid white; margin-left: 5vw;}
.visit a:visited {background-color: yellow; border-color: hotpink; color: hotpink;}
a.lwitters {color: green;}
a.lwitters:visited {color: #E18728;}
a.wikipedia{border: 2px solid blue;}
a.wikipedia:visited {border: 2px solid black;}
a.google {background-color: yellow;color: black;}
a.google:visited {background-color: #E18728;color: white;}
section {max-width: 60vw; font-size: 1vw; font-family: Helvetica, sans-serif;}
</style>
:any-link - matches an element if the element would match either :link or :visited.
:focus-visible - matches when an element has focus and the user agent identifies that the element should be visibly focused<. (It is triggered by selecting it with the keyboard's Tab key.)
matches elements based on the language they are determined to be in.
This paragraph is English, but the language is not specifically defined.
This paragraph is defined as British English.
Ce paragraphe est défini en français.
I live in Italy.
Ciao bella!
code:
<div>
<div>
<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
</div>
<div>
<p>I live in Italy.</p>
<p lang="it">Ciao bella!</p>
</div>
</div>
<style>
.output {font: 1vw 'Fira Sans', sans-serif;}
p::before {padding-right: 5px;}
[lang="en-GB"]::before {content: url('british.jpg');}
[lang="fr"]::before {content: url('french.png'); width: 10%;}
p:lang(it) {background: yellow; width: 30vw; margin-left: 5vw;}
</style>
The :default selector selects the default form element in a group of related elements. The :default selector can only be used on <button>, <input type="checkbox">, <input type="radio">, and <option> elements.
The :fullscreen selector is used to select the element(s) that is in full-screen mode.
Syntax: :fullscreen {CSS declarations}
examples
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
code:
<style>
/* Safari syntax */
:-webkit-full-screen {background-color: red;}
/* IE11 syntax */
:-ms-fullscreen {background-color: red;}
/* Standard syntax */
:fullscreen {background-color: red;}
/* Style the button */
button {padding: 1vw; font-size: 1vw;}
</style>
<div>
<p class="spec-1">Click on the "Open Fullscreen" button to open this page in
fullscreen mode. Close it by either clicking the "Esc" key on your keyboard,
or with the "Close Fullscreen" button.</p>
<button style="margin-left:2vw;" onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
</div>
The :indeterminate selector selects form elements that are in an indeterminate state. The :indeterminate selector can only be used on <input type="checkbox>, <input type="radio">, and <progress> elements.
Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript.
Radio buttons are indeterminate when all radio buttons with the same name value in the form are unchecked.
Syntax: :indeterminate {CSS declarations}
examples
The checkbox below is in an indeterminate state (by JavaScript). If you click on it, it will change its state to "checked", and lose its red shadow color, as it is no longer indeterminate.
Note that an indeterminate checkbox has a "-" icon, rather than a checkmark or an empty box.
Checkbox
code:
<style>
input:indeterminate {box-shadow: 0 0 1px 1px red;}
</style>
<div>
<p class="spec-1">The checkbox below is in an indeterminate state (by JavaScript).
If you click on it, it will change its state to "checked", and lose its red
shadow color, as it is no longer indeterminate.</p>
<p class="spec-1">Note that an indeterminate checkbox has a "-" icon,
rather than a checkmark or an empty box.</p>
<input style="margin-left:2vw;" type="checkbox" id="myCheckbox"> Checkbox
</div>
<script>
// Make the checkbox indeterminate via JavaScript
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
Use the :valid selector to select form elements with a value that validates according to the element's settings.
Syntax: :invalid {CSS declarations}
examples
Try typing a legal e-mail address, to see the styling disappear.
code:
<style>
input:invalid { border: 1vw solid red;}
</style>
<div>
<input style="margin-left:2vw;" type="email" value="supportEmail">
<p class="spec-1">Try typing a legal e-mail address, to see the styling disappear.</p>
</div>
