CSS :focus-within pseudo selector

The :focus-within pseudo-selector in CSS selects an element if that element contains any children that have :focus.

CSS :focus-visible pseudo selector

The :focus-visible pseudo-class is a native CSS way to style elements that,

1. Are in focus

2. Need a visible indicator to show focus

:focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus.
:focus-visible only applies when you actually want a visual indicator to help the user see where the focus is.

CSS :focus pseudo selector

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.

Most commonly inputs and textarea are in “focus” when they are selected and ready to enter text like when a cursor is blinking. Mouse users can click them or their related label to focus, and keyboard users can TAB into them.

CSS :first-of-type pseudo selector

The :first-of-type selector in CSS allows you to target the first occurrence of an element within its container.

It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

CSS :first-child pseudo selector

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a structural pseudo-class, means it is used to style content based on its relationship with parent and sibling content.

Using :first-child is very similar to :first-of-type but with one critical difference: it is less specific. :first-child will only try to match the immediate first child of a parent element, while first-of-type will match the first occurrence of a specified element, even if it doesn’t come absolutely first in the HTML.

In the example above the output would be the same, only because the first child of the article also happens to be the first p element. This reveals the power of :first-child: it can identify an element with relation to all its siblings, not just siblings of the same type.