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
::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
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:
- email: developer.aya.b@gmail.com
- telegram: Aya Bouchiha
Have an amazing day!
Top comments (2)
Useful, thank you 🙏
Glad to hear that,
My pleasure