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

9 1

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!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (2)

Collapse
 
mgiannopoulos profile image
Markos Giannopoulos

Useful, thank you 🙏

Collapse
 
ayabouchiha profile image
Aya Bouchiha

Glad to hear that,
My pleasure

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay