DEV Community

Cover image for What is this weird CSS Syntax?

What is this weird CSS Syntax?

Seth Addo on June 28, 2024

So I came across this yesterday and I want to share with you. Say you have div container with class of list and inside it are 10 more div each with...
Collapse
 
keenan profile image
Keenan

Video link broke

Collapse
 
seths10 profile image
Seth Addo

fixed

Collapse
 
donniedamato profile image
Donnie D'Amato • Edited

The article isn't totally accurate. The asterisk selector means to select any element; it has nothing to do with the parts of the selector that come before it.

.item + * + * {
  // your css
}
Enter fullscreen mode Exit fullscreen mode

Says find the element with class "item" and then select any adjacent element and then select any adjacent element to finally apply styles.

If you want to specifically target the same class, you need to write that class:

.item + .item + .item {
  // your css
}
Enter fullscreen mode Exit fullscreen mode

It doesn't matter much in the examples provided because they all are similar elements. But the distinction is important.

Collapse
 
andrewsavetchuk profile image
Andrew Savetchuk

Agree. But it was a nice trick in the video example.

Collapse
 
seths10 profile image
Seth Addo

please read the article again and if possible try it on your own to understand it. Context matters. The video will give an even better understanding

Collapse
 
donniedamato profile image
Donnie D'Amato

I understand the selector fully. Your explanation about what is happening is incorrect.

Collapse
 
thomas_harris_ee90c58d32e profile image
Thomas Harris • Edited

in this case, wouldn't it be better and more future proof to specifically specify that we want to apply the effects to the .item classed elements adjacent to the hovered element as opposed to the adjacent element? Incase someone adds another div under every image or a p tag under every image etc. We wont be referencing the wrong elements.

Collapse
 
janardanpethani profile image
Janardan Pethani

Agreed

Collapse
 
kibobishtrudelz profile image
Petar Kolev

Good to know, thanks for the article!
This is something I will never use in my projects. I prefer more verbose but explicit selectors. This kind of syntax will throw any developer who is not familliar with it in a mind blowing void, like "WTF is that?!?" :D

Collapse
 
seths10 profile image
Seth Addo

well, at least you learnt something

Collapse
 
afolabiolajide profile image
Afolabi Olajide Samuel

That's great information thank you.

Collapse
 
merwusch profile image
Mervenur

Absolute trick. Thanks