Type selectors in CSS

A Type Selector matches elements with the corresponding element node name, such as p, span, and div tags.

:target – CSS pseudo selector

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
One possibility is when you want style with “states.” When the page has a certain hash, it’s in that state.

When :target is a good choice:

1. When a “state” is needed
2. When the jump-down/hash-link behavior is acceptable
3. When it’s acceptable to affect the browser history

::selection – CSS pseudo selector

You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme.

You can style ::selection on individual elements. You can also style the entire page by dropping the bare pseudo-element in your stylesheet.

There are only three properties that ::selection will work with:

• color
• background
• text-shadow

One of the most helpful uses for ::selection is turning off a text-shadow during selection.

:root – CSS pseudo selector

The :root selector allows you to target the highest-level parent element in the DOM, or document tree.

Regardless of the markup language, :root will always select the document’s top-most element in the document tree.

5 CSS Practices To Avoid as a Web Developer

1. Set Margins or Padding and Then Reset Them
2. Add display: block for Elements With position: absolute or position: fixed
3. Use transform: translate (-50%, -50%) To Center
4. Use width: 100% for Block Elements
5. Set display: block for Flex Items