DEV Community

Cover image for 6 CSS Selectors That You Will Use At Least One Of Them In Your Next Project
Aya Bouchiha
Aya Bouchiha

Posted on

6 CSS Selectors That You Will Use At Least One Of Them In Your Next Project

Hello,
I'm Aya Bouchiha,
today, we're going to talk about 6 CSS Selectors That You Will Use At Least One Of Them In Your Next Project.

element1~element2

element1~element2: used to match occurrences of element2 that are preceded by element1.
Note: element1 and element2 should have the same parent.

element1+element2

element1 + element2: means select the next sibling of element1.

element1>element2

element1 > element2: means select element2 where element1 is its parent.

element1 *

element1 *: select all elements that are inside element1.

::first-letter

::first-letter: used to select the first letter of the specified element.
The properties that can be used with ::first-letter are:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if float is 'none')
  • text-transform
  • line-height
  • float
  • clear

more details

::selection

::selection: used to make styling to a piece of content that has been selected, highlighted, dragged using the mouse by the user.

The properties that can be used with ::selection are:

  • color
  • background-color
  • text-decoration and its associated properties
  • text-shadow
  • stroke-color
  • fill-color
  • stroke-width

more details

Summary

  • element1~element2:used to match occurrences of element2 that are preceded by element1.
  • element1 + element2: selects the next sibling of element1.
  • element1 > element2: selects element2 where element1 is its parent.

  • *element1 **: selects all elements that are inside element1.

  • ::first-letter: selects the first letter of the specified element.

  • ::selection: makes styling to a piece of content that has been selected, highlighted, dragged using the mouse by the user.

References

Suggested Posts

To Contact Me:

Have an amazing day!

Top comments (2)

Collapse
 
mgiannopoulos profile image
Markos Giannopoulos

Useful, thank you 🙏

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Glad to hear that,
My pleasure