What is mean by that in a selector like '#expand-toggle:checked ~ * .expandable'?

MDN
#1 
```
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}
```

I don’t understand what these ~ * means here. Can anyone help me to understand?

#2

Hi @rkprite09 and welcome to the community :wave:

~ is called a General sibling combinator. It matches elements which are siblings of the element on the left side and come after it.
* is just the universal selector that matches every element.

To make it simpler to understand we can look at it like this: a ~ b c (where a, b and c are selectors). If c is a child of b and b is a sibling of a and comes after a in the code, this selector matches on c.

As a challenge, you could use an online editor like Codepen to create a HTML structure that matches your selector to test it. (maybe use color: red; instead of visibility: visible; to make it easier.

I hope that helps. Feel free to ask, if you need more assistance.

Have a nice day!
Michael

1 Like
#3

Thank you very much for replied on me with a easy tutorial. The reason behind not understood the topic .I have seen this example on pseudo-class and pseudo-element and here they had used general siblings combinator thats why I have not understood. Because the page of combinator is subsequent to the pseudo-class and pseudo elements.

#4

Glad I could help :smiley:

Ahh, now I see, it’s from the MDN :checked page.

#5

Yeah you are right.But it was not easy for who are new in this topic.

#6

I think you missunderstood me.
I didn’t meant to say that it’s easy. I think it’s a difficult selector to understand. I just didn’t know that #expand-toggle:checked ~ * .expandable was used in the MDN documentation. :grin:

Happy weekend! :tada:
Michael

#7

I didn’t mean that . You missunderstood me. Because I just means that it is not easy for newbie after reading this documentation page after page.

#8

Sorry! Now I understand you :sweat_smile:
Yes, you are right. It’s a big step from reading the documentation to really understand everything.

#9

I am trying to connect a group of people in whatsapp to talk with each other and talk more about web .I want to be an entreprenuer . Need of group of people to make a startup after a few years of working with .