My Fun Article
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?
Revision:
It can be used to style an element when a user mouses over it, to style visited and unvisited links differently, to style an element when it gets focus, etc.
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.
CSS classes can also be used with pseudo-classes : syntax : selector.class:pseudo-class {property: value}
Like regular classes, you can chain together as many pseudo-classes as you want in a selector.
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.
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!
Syntax: :active {css declarations;}
<style>
a:active {background-color: yellow;}
</style>
<div style="margin-left:2vw;">
<a style="color:blue" href="https://www.lwitters.com">my website: lwitters.com</a>
<a style="color:blue" href="http://www.wikipedia.org">wikipedia.org</a>
</div>
The :checked selector matches every checked <input> element (only for radio buttons and checkboxes) and <option> element.
Syntax: :checked {css declarations;}
<style>
input.yes:checked { height: 3vw; width: 3vw;}
</style>
<div>
<form style="margin-left: 2vw" action="">
<input class="yes" type="radio" checked="checked" value="male" name="gender"> Male<br>
<input class="yes" type="radio" value="female" name="gender"> Female<br>
<input class="yes" type="checkbox" checked="checked" value="Bike"> I have a bike<br>
<input class="yes" type="checkbox" value="Car"> I have a car
</form>
</div>
The :disabled selector matches every disabled element (mostly used on form elements).
Syntax: :disabled {css declarations;}
<style>
input[type=text]:enabled {background: #ffff00;}
input[type=text]:disabled {background: #dddddd;}
</style>
<div>
<form style="margin-left: 2vw;" action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
</div>
The :empty selector matches every element that has no children (including text nodes).
Syntax: :empty {CSS declarations}
A paragraph.
Another paragraph.
<style>
p:empty { width: 10vw; height: 2vw; background: #ff0000;}
</style>
<div>
<p class="spec"></p>
<p class="spec">A paragraph.</p>
<p class="spec">Another paragraph.</p>
</div>
The :enabled selector matches every enabled element (mostly used on form elements).
Syntax: :enabled {CSS declarations}
<style>
input.five[type=text]:enabled {background: #ffff00;}
input.five[type=text]:disabled {background: #dddddd;}
</style>
<div>
<form style="margin-left:2vw" action="">
First name: <input class="five" type="text" value="Mickey"><br>
Last name: <input class="five" type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
</div>
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}
I am a strong man. I am a strong man.
I am a strong man. I am a strong man.
<style>
p:first-child i {background: lightcyan;}
</style>
<div>
<p class="spec">I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p class="spec">I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</div>
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}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
<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>
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}
Click inside the text fields to see a lightbrown background:
<style>
input.four:focus {background-color: burlywood;}
</style>
<div>
<p class="spec">Click inside the text fields to see a lightbrown background:</p>
<form style="margin-left:2vw;">
First name: <input class="four" type="text" name="firstname"><br>
Last name: <input class="four" type="text" name="lastname">
</form>
</div>
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.
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!
Syntax: :hover {CSS declarations}
Mouse over the links to see them change layout.
<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">Mouse over the links to see them change layout.</p>
<p class="spec"><a class="ex1" href="default.asp">This link changes color</a></p>
<p class="spec"><a class="ex2" href="default.asp">This link changes font-size</a></p>
<p class="spec"><a class="ex3" href="default.asp">This link changes background-color</a></p>
<p class="spec"><a class="ex4" href="default.asp">This link changes font-family</a></p>
<p class="spec"><a class="ex5" href="default.asp">This link changes text-decoration</a></p>
</div>
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!
Use the :out-of-range selector to select all elements with a value that is outside a specified range.
Syntax: :in-range {CSS declarations}
Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.
<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">Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>
</div>
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}
Try typing a legal e-mail address, to see the styling disappear.
<style>
input:invalid { border: 1vw solid red;}
</style>
<div>
<input style="margin-left:2vw;" type="email" value="supportEmail">
<p class="spec">Try typing a legal e-mail address, to see the styling disappear.</p>
</div>
The :lang() selector is used to select elements with a lang attribute with the specified value.
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).
Syntax: :lang(language code) {CSS declarations}
Ik ben geboren in Belgie.
Goedendag
<style>
p:lang(nl) {background: lightblue;}
</style>
<div>
<p class="spec">Ik ben geboren in Belgie.</p>
<p class="spec" lang="nl">Goedendag</p>
</div>
The :last-child selector matches every element that is the last child of its parent.
Tip: p:last-child is equal to p:nth-last-child(1).
Syntax: :last-child {CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
<style>
p:last-child {background: lightgreen;}
</style>
<div>
<p class="spec ten">The first paragraph.</p>
<p class="spec ten">The second paragraph.</p>
<p class="spec ten">The third paragraph.</p>
<p class="spec ten">The fourth paragraph.</p>
</div>
The:last-of-type selector matches every element that is the last child, of a particular type, of its parent.
Tip: this is the same as :nth-last-of-type(1).
Syntax: :last-of-type {CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
<style>
p.eleven:last-of-type {background: lightcyan;}
</style>
<div>
<p class="spec eleven">The first paragraph.</p>
<p class="spec eleven">The second paragraph.</p>
<p class="spec eleven">The third paragraph.</p>
<p class="spec eleven">The fourth paragraph.</p>
</div>
The :link selector is used to select unvisited links.
Note: The :link selector does not style links you have already visited.
Tip: 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.
Syntax: :link {CSS declarations}
<style>
a.twelve:link { background-color: yellow;}
</style>
<div style="margin-left: 2vw;">
<a class="twelve" href="https://www.lwitters.com">my website</a>
<a class="twelve" href="http://www.wikipedia.org">Wikipedia</a>
</div>
The :not(selector) selector matches every element that is NOT the specified element/selector.
Syntax: :not(selector) {CSS declarations}
This is a paragraph.
This is another paragraph.
<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>
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.
Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.
Syntax: :nth-child(number){CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
<style>
.special3 > p.two2:nth-child(odd) {background: lightcyan;}
.special3 > p.two2:nth-child(even) {background: lightblue;}
</style>
<div class="special3">
<p class="spec two2">The first paragraph.</p>
<p class="spec two2">The second paragraph.</p>
<p class="spec two2">The third paragraph.</p>
</div>
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
The fifth paragraph.
The sixth paragraph.
The seventh paragraph.
The eight paragraph.
The ninth paragraph.
<style>
.special4 > p.three:nth-child(3n+0) {background: red;}
</style>
<div class="special4">
<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>
<p class="three">The fifth paragraph.</p>
<p class="three">The sixth paragraph.</p>
<p class="three">The seventh paragraph.</p>
<p class="three">The eight paragraph.</p>
<p class="three">The ninth paragraph.</p>
</div>
Syntax: :nth-last-child(number){CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
The fifth paragraph.
The sixth paragraph.
The seventh paragraph.
The eight paragraph.
The ninth paragraph.
<style>
.special4A > p.three3:nth-child(2n+0) {background: red;}
</style>
<div class="special4A">
<p class="three3">The first paragraph.</p>
<p class="three3">The second paragraph.</p>
<p class="three3">The third paragraph.</p>
<p class="three3">The fourth paragraph.</p>
<p class="three3">The fifth paragraph.</p>
<p class="three3">The sixth paragraph.</p>
<p class="three3">The seventh paragraph.</p>
<p class="three3">The eight paragraph.</p>
<p class="three3">The ninth paragraph.</p>
</div>
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.
Tip: 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.
Syntax: :nth-last-of-type(number) {CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
<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>
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
The fifth paragraph.
The sixth paragraph.
The seventh paragraph.
The eight paragraph.
The ninth paragraph.
<style>
p.seven:nth-last-of-type(3n+0) {background: lightblue;}
</style>
<div>
<p class="seven">The first paragraph.</p>
<p class="seven">The second paragraph.</p>
<p class="seven">The third paragraph.</p>
<p class="seven">The fourth paragraph.</p>
<p class="seven">The fifth paragraph.</p>
<p class="seven">The sixth paragraph.</p>
<p class="seven">The seventh paragraph.</p>
<p class="seven">The eight paragraph.</p>
<p class="seven">The ninth paragraph.</p>
</div>
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.
Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.
Syntax: :nth-of-type(number) {CSS declarations}
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
<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>
The second paragraph.
The third paragraph.
The fourth paragraph.
The fifth paragraph.
The sixth paragraph.
The seventh paragraph.
The eight paragraph.
The ninth paragraph.
<style>
p.nine:nth-of-type(3n+0) {background: lightblue;}
</style>
<div>
<p class="nine">The first paragraph.</p>
<p class="nine">The second paragraph.</p>
<p class="nine">The third paragraph.</p>
<p class="nine">The fourth paragraph.</p>
<p class="nine">The fifth paragraph.</p>
<p class="nine">The sixth paragraph.</p>
<p class="nine">The seventh paragraph.</p>
<p class="nine">The eight paragraph.</p>
<p class="nine">The ninth paragraph.</p>
</div>
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}
This is a paragraph.
This is a paragraph.
This is a paragraph.
<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>
The :only-child selector matches every element that is the only child of its parent.
Syntax: :only-child {CSS declarations}
This is a paragraph.
This is a paragraph.
This is a paragraph.
<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>
The :optional selector selects form elements which are optional. Form elements with no "required" attribute are defined as optional.
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.
Syntax: :optional {CSS declarations}
An optional input element:
A required input element:
<style>
input:optional {background-color: yellow;}
</style>
<div>
<p class="thirteeen">An optional input element: <input></p>
<p class="thirteen">A required input element: <input required></p>
</div>
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!
Tip: use the :in-range selector to select all elements with a value that is within a specified range.
Syntax: :out-of-range {CSS declarations}
Try typing a number within the given range (between 5 and 10), to see the styling disappear.
<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>
The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly".
Syntax: :read-only {CSS declarations}
A normal input element:
A readonly input element:
<style>
input:read-only {background-color: yellow;}
</style>
<div>
<p class="fourteen">A normal input element: <input value="hello"></p>
<p class="fourteen">A readonly input element: <input readonly value="hello"></p>
</div>
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".
Syntax: :read-write {CSS declarations}
A normal input element:
A readonly input element:
<style>
.fifteen input:read-write { background-color: lightgreen;}
</style>
<div>
<p class="fifteen">A normal input element: <input value="hello"></p>
<p class="fifteen">A readonly input element: <input readonly value="hello"></p>
</div>
The :required selector selects form elements which are required. Form elements with a required attribute are defined as required.
Note: the :required selector only applies to the form elements: input, select and textarea.
Tip: use the :optional selector to select form elements which are optional.
Syntax: :required {CSS declarations}
An optional input element:
A required input element:
<style>
.special5 > .sixteen input:required {background-color: orange;}
</style>
<div class="special5">
<p class="sixteen">An optional input element: <input></p>
<p class="sixteen">A required input element: <input required></p>
</div>
The :root selector matches the document's root element. In HTML, the root element is always the html element.
Syntax: :root {CSS declarations}
<style>
:root {background: #ff0000;}
</style>
<div>
<h1>This is a heading</h1>
</div>
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.
Syntax: :target {CSS declarations}
Click on the links above and the :target selector highlight the current active HTML anchor.
New content 1...
New content 2...
<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>
The :valid selector selects form elements with a value that validates according to the element's settings.
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.
Syntax: :valid {CSS declarations}
<style>
input:valid {background-color: yellow;}
</style>
<div>
<input style="margin-left:2vw;" type="email" value="support@example.com">
</div>
The :visited selector is used to select visited links.
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.
Syntax: :visited {CSS declarations}
<style>
a:visited {color: pink;}
</style>
<div>
<a style="margin-left:2vw;" href="https://www.w3schools.com">W3Schools Home</a><br>
<a style="margin-left:2vw;" href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a><br>
<a style="margin-left:2vw;" href="https://www.w3schools.com/css/">W3Schools CSS Tutorial</a>
</div>
These pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.
Syntax : :dir([ltr | rtl]) { /* ... */ }
Parameters:
ltr : target left-to-right elements
rtl : target right-to-left elements
<div>
<div id="item1" dir="rtl">
<span>test1</span>
<div id="item2" dir="ltr">
test2
<div id="item3" dir="auto"> ففي </div>
</div>
</div>
</div>
<style>
#item1:dir(ltr) {background-color: #1c87c9;}
#item2:dir(rtl) {background-color: #8ebf42;}
</style>
example: see above
These pseudo-classes relate to links and to targeted elements within the current document.
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.
Syntax : :any-link { /* ... */ }
<div>
<a class="item-A" href="https://lwitters.com.com">External link</a><br />
<a class="item-A" href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
</div>
<style>
.item-A:any-link { border: 0.1vw solid blue; color: orange;}
/* WebKit browsers */
.item-A:-webkit-any-link {border: 1px solid blue; color: orange;}
</style>
example: see above
example: see above
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.
Syntax: :local-link {/* ... */}
<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>
example: see above
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".
Syntax: :target-within { /* ... */}
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?
<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>
Syntax : :scope {/* ... */}
This is a paragraph. It is not an interesting paragraph. Sorry about that.
<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.
example: see here above
example: see here above
example: see here above
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.
Syntax : :focus-visible {/* ... */}
<div>
<input class="item-DD" value="Default styles" /><br />
<button class="item-DE">Default styles</button><br />
<input class="item-DD focus-only" value=":focus only" /><br />
<button class="item-DE focus-only">:focus only</button><br />
<input class="item-DD focus-visible-only" value=":focus-visible only" /><br />
<button class="item-DE focus-visible-only">:focus-visible only</button>
</div>
<style>
input.item-DD, button.item-DE { margin: 1vw; background-color: transparent;}
.focus-only:focus { outline: 0.2vw solid black;}
.focus-visible-only:focus-visible {outline: 0.4vw dashed darkorange;}
</style>
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.)
Syntax : :focus-within{/* ... */}
Try typing into this form.
<div>
<p>Try typing into this form.</p>
<form class="spec item-DE">
<label for="given_name-A">Given Name:</label>
<input id="given_name-A" type="text" />
<br />
<label for="family_name-A">Family Name:</label>
<input id="family_name-A" type="text" />
</form>
</div>
<style>
form { border: 0.1vw solid; color: gray; padding: 0.4vw;}
form:focus-within {background: #ff8; color: black;}
input#given_name-A, input#family_name-A {margin: 0.4vw; background-color: transparent;}
</style>
These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.
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{/*...*/}
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 {/* ... */}
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.
Syntax : :future {/* ... */}
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.
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{/*...*/}
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."
Syntax : :paused{/*...*/}
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.
The class stops matching if the user edits the field.
Syntax : :autofill {/* ... */}
<div>
<form id="form-AA" method="post" action="">
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="email" />
</form>
</div>
<style>
#form-AA #email {border: 0.3vw solid grey; border-radius: 0.3vw;}
#form-AA #email:-webkit-autofill {border: 0.3vw solid blue;}
#form-AA #email:autofill {border: 0.3vw solid blue;}
</style>
example, see above
example, see above
example, see above
example, see above
Syntax : :placeholder-shown{/*...*/}
<div>
<input placeholder="Type something here!" />
</div>
<style>
input {border: 0.1vw solid black; padding: 0.3vw;}
input:placeholder-shown { border-color: teal; color: purple;font-style: italic;}
</style>
Syntax : :default{/*...*/}
<div>
<fieldset>
<legend>Favorite season</legend>
<input type="radio" name="season" id="spring" value="spring" />
<label for="spring">Spring</label>
<input type="radio" name="season" id="summer" value="summer" checked />
<label for="summer">Summer</label>
<input type="radio" name="season" id="fall" value="fall" />
<label for="fall">Fall</label>
<input type="radio" name="season" id="winter" value="winter" />
<label for="winter">Winter</label>
</fieldset>
</div>
<style>
input:default {box-shadow: 0 0 0.2vw 0.1vw coral;}
input:default + label {color: coral;}
</style>
example, see above
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{/*...*/}
<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>
Syntax : :blank{/*...*/}
<div>
<textarea id="item-BCD"></textarea>
</div>
<style>
#item-BCD:blank {border: 0.3vw solid red;}
</style>
For example an input element with type 'email' which contains a validly formed email address.
example, see above
For example an input element with type 'email' with a name entered.
example, see above
For example a slider control, when the selected value is in the allowed range.
example, see above
For example a slider control, when the selected value is outside the allowed range.
example, see above
example, see above
example, see above
Syntax : :user-invalid{/*...*/}
<div>
<form>
<label class="item-ZZZ" for="email">Email *: </label>
<input id="email-AA" name="email" type="email" required />
<span></span>
</form>
</div>
<style>
.item-ZZZ input#eamil-AA:user-invalid {border: 0.2vw solid blue;}
input#email:user-invalid + span::before {content: "✖";color: red;}
</style>
These pseudo-classes relate to the location of an element within the document tree.
In HTML this is usually the <html> element.
example, see above
example, see above
example, see above
example, see above
example, see above
example, see above
For example a list item with no other list items in that list.
example, see above
example, see above
example, see above
example, see above
example, see above
example, see above
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.
This is my header paragraph
This is my first
list item
This is my second
list item
<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.
/* 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;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
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.
A serious portal for web developments.
<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="special" style="margin-left:5vw">
<header class="header"><a>Climate</a></header>
<main class="main"><a>change</a></header>
<aside id="aside"><a>needs</a></aside>
<footer class="footer"><a>actions</a></footer>
</div>
<style>
:where(.header, .footer) a {color: red;}
</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)
<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>
<div style="margin-left:3vw;"class="parent">
<div class="on">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="on"></div>
</div>
<style>
div:not(.special) {margin: 2%; background-color: cadetblue;
padding: 10%; height: 8vw;}
div:not(.parent, .special) { box-shadow: inset 0 0 2.4vw tomato;
padding: 2%; }
.parent{border: 4px ridge orange;}
.on {background-color: lightgreen;border: 4px groove gray;}
.two{height: 2vw;}
</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.
<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:
<div class="special">
<form style="margin-left:5vw;">
First name: <input class="name" type="text" name="firstname"><br>
Last name: <input class="name" type="text" name="lastname">
</form>
</div>
<style>
.name:focus {background-color: lightgreen;}
</style>
Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:
Search:
<div class="special">
<p class="spec" 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" 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>
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">
<input style="margin-left:5vw;" value="default styles"><br>
<button>default styles</button><br>
<input style="margin-left:5vw;" class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input style="margin-left:5vw;" class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
</div>
<style>
input, button {margin-left: 5vw;}
.focus-only:focus {outline: 0.2vw solid black;}
.focus-visible-only:focus-visible {outline: 0.4vw dashed darkorange;}
</style>
Click a sentence to get 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>
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.
Try typing into this form.
<div class="special">
<p class="spec" style="margin-left:5vw;">Try typing into this form.</p>
<form class="trial" style="margin-left:5vw;">
<label for="given_name">Given Name:</label>
<input id="given_name" type="text">
<br>
<label for="family_name">Family Name:</label>
<input id="family_name" type="text">
</form>
</div>
<style>
.trial {border: 0.1vw solid; color: gray; padding: 0.4vw;}
.trial:focus-within {background: #ff8; color: black;}
input {margin: 0.4vw;}
</style>
<div class="special">
<form style="margin-left:5vw;" class="demo-form">
<input type="text" placeholder="Name" /><br>
<input type="text" placeholder="Email" />
</form>
</div>
<style>
.demo-form {background-color: #bdc3c7; padding: 2vw;}
.demo-form:focus-within {background-color: #f1c40f;}
.demo-form input[type="text"]:focus {border: 0.1vw solid #d35400;}
</style>
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).
:nth-child(5n+1) : select the 1st (=(5x0)+1), 6th (=(5x1)+1), 11th (=(5x2)+1), … child.
:nth-child(5n+2) : Select the 2nd (=(5x0)+2), 7th (=(5x1)+2), 12th (=(5x2)+2), … child.
:nth-child(2) : select the 2nd child.
But, there are more creative selections you can do, if you omit the A parameter. For example:
:nth-child(n+3) : select every child from the 3rd one up (3rd, 4th, 5th, and so on).
:nth-child(-n+5) : select every child up to the 5th one (1st, 2nd, 3rd, 4th, 5th).
Combine a few of these :nth-child() selections and you can select ranges of elements:
:nth-child(n+3):nth-child(-n+5): select every child from the 3rd one up to the 5th one (3rd, 4th, 5th).
Using :nth-last-child() you can do similar selections, but instead of starting to count from the start, you start counting from the end.
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
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.
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element.
This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.
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.
The :has() pseudo-class 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().
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>
<style>
/* unvisited link */
a:link {color: red;}
/* visited link */
a:visited {color: green;}
/* mouse over link */
a:hover {color: hotpink;}
/* selected link */
a:active {color: blue;}
</style>
<p class="ex"><b><a href="https://www.lwitters.com" target="_blank">This is a link</a></b></p>
Tada! Here I am!
<style>
.one {background-color: green; color: white; padding: 2vw; text-align: center;}
.one:hover {background-color: blue;}
.two {display: none; background-color: red; padding: 2vw;}
.one:hover .two {display: block;}
</style>
<div class="one">Mouse Over Me
<p class="two spec">Tada! Here I am!</p>
</div>