CSS Pseudo Classes
Pseudo classes are a special type of CSS classes that are used to add styles to selectors, but only when those selectors meet certain conditions. They are divived into the following types:
- Element display state pseudo classes
- Input pseudo classes
- Linguistic pseudo classes
- Location pseudo classes
- Resource state pseudo classes
- Time-dimensional pseudo classes
- Tree-structural pseudo classes
- User action pseudo classes
- Functional pseudo classes
They have the following syntax:
selector:pseudo-class {
property: value;
}Element Display State
These pseudo classes select elements based on their display states.
:fullscreen
Matches an element that is currently in fullscreen mode.
Example:
div {
background-color: orange;
}
div:fullscreen {
background-color: skyblue;
}In the above example, when the browser is not in fullscreen mode, the div will have a background color of orange. When fullscreen mode is requested by the user, the div will have a background color of skyblue.
Here is some additional HTML and JavaScript code that will toggle fullscreen mode so that you can see it in action:
<div>
<h1>Fullscreen mode demo</h1>
<p>Orange background when not in fullscreen and skyblue background when in fullscreen</p>
<button>Toggle Fullscreen</button>
</div>document.querySelector("button").addEventListener("click", () => {
// Checks if the document is already in fullscreen mode
// and toggles out of fullscreen if it already is.
if (document.fullscreenElement) {
document.exitFullscreen();
return;
}
// Toggle fullscreen mode if the document is not in fullscreen
document.querySelector("div").requestFullscreen();
});:modal
This is used to target an element that is in a modal state - a state in which it prevents interactions with elements outside until it has been dismissed.
<p>Would you like to see a new random number?</p>
<button id="showNumber">Show me</button>
<dialog id="favDialog">
<form method="dialog">
<p>Lucky number is: <strong id="number"></strong></p>
<button>Close dialog</button>
</form>
</dialog>button {
display: block;
margin: auto;
width: 10rem;
height: 2rem;
}
:modal {
background-color: beige;
border: 2px solid burlywood;
border-radius: 5px;
}
p {
color: black;
}const showNumber = document.getElementById('showNumber');
const favDialog = document.getElementById('favDialog');
const number = document.getElementById('number');
showNumber.addEventListener('click', () => {
number.innerText = Math.floor(Math.random() * 1000);
favDialog.showModal();
});Run this example on your machine to see how :modal works, or view it on MDNÂ
:picture-in-picture
This targets elements that are displaying in picture-in-picture mode: usually videos.
picture-in-pictureis not supported on Firefox and Firefox for Android.
Example:
:picture-in-picture {
padding: 1.5rem;
background-color: rebeccapurple;
}