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
: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;
}