Combinators in CSS š
ā
descendant (space)
ā
child (>)
ā
adjacent sibling (+)
ā
general sibling (~)
Thread š§µ
Combinators
ā¢ Used to combine other selectors in a way that gives them a useful relationship with each other and the location of content in the html.
ā¢ Between the two simple selectors, we can include a combinator.
Descendant combinator (space)
ā¢ Represented by a single space.
ā¢ Descendant selector matches all elements that are descendants of a specified element.
ā¢ In the example below, we are matching only the <h1> element which is inside an div element with a class of .box.
Child combinator (>)
ā¢ child combinator (>) is placed between two selectors.
ā¢ child selector selects all elements that are the children of a specified element.
ā¢ Example :
Adjacent sibling combinator (+)
ā¢ Used to select an element that is directly after another specific element.
ā¢ The following example selects the first <p> element that are placed immediately after <h3> elements:
General sibling combinator (~)
ā¢ Used to selects all elements that are next siblings of a specified element.
ā¢ The following example selects all <p> elements that are next siblings of <div> elements:
End thread š§µ
If this thread helpful for you then
1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin
Thankyou ā£ļø
Vipin
@SocialWithAI
HTML is š„ | CSS is ā£ļø Hi š I'm Vipin, I'm learning web2 and sharing my knowledge with you guys in easy ways.