Difference between :empty and :blank pseudo selectors CSS

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a dialog or any element that enters fullscreen mode using the Fullscreen API.

::backdrop does not inherit from any element and is not inherited from. So, there’s no cascade happening where you might run into a conflict between the backdrops of two elements.

Since there are no restrictions on what properties we can declare on this pseudo-element, it’s possible to add animations and transforms to a backdrop — or even change the style on states, like hover:

The ::backdrop CSS pseudo-element

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a dialog or any element that enters fullscreen mode using the Fullscreen API.

::backdrop does not inherit from any element and is not inherited from. So, there’s no cascade happening where you might run into a conflict between the backdrops of two elements.

Since there are no restrictions on what properties we can declare on this pseudo-element, it’s possible to add animations and transforms to a backdrop — or even change the style on states, like hover:

CSS Attribute Selectors tutorial with examples

There are multiple ways you can select elements in CSS. The most basic selection is by tag name, like div { }. Almost anything more specific than a tag selector uses attributes — class and ID both select on those attributes on HTML elements, but class and ID aren’t the only attributes developers can select.

We can use any of an element’s attributes as selectors.

We can use any of an element’s attributes as selectors, Attribute selectors are case-sensitive by default.

The Seven Different Types :

[data-value]

[data-value="foo"]

[data-value*="foo"]

[data-value~="foo"]

[data-value^="foo"]

[data-value|="foo"]

[data-value$="foo"]

You can combine an attribute selector with other selectors, like tag, class, or ID Or even combine multiple attribute selectors.

CSS Adjacent Sibling selector

The adjacent sibling combinator in CSS isn’t a selector on its own, but a way of combining two selectors.

The plus sign (+) is the adjacent sibling combinator.

This is mostly useful for when using semantic markup and needing to adjust for certain scenarios in which elements are directly next to each other.

Supports all major browsers.

Learn CSS :any-link selector in 2 minutes

The :any-link pseudo-class in CSS provides a method for selecting hyperlink elements.

An element that accepts and contains a href attribute is a hyperlink and will be selected with :any-link.

For full support you’d want to use it prefixed:

:-webkit-any-link { }

:-moz-any-link { }

:any-link { }