Search
Get Started
KP-C
Kevin Powell - Community
β’
4y ago
gunter
Opposite of adjacent sibling combinator?
Title
^
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,373
Members
View on Discord
Was this page helpful?
Yes
No
G
gunter
OP
β’
9/29/22, 11:53 AM
So instead of
immediately follows
, is there
immediately before
?
G
gunter
OP
β’
9/29/22, 11:54 AM
-
-
-
Reference
:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
1
13eck
β’
9/29/22, 12:48 PM
Kevin recently did a video on this
:
https://youtu.be/OGJvhpoE8b4
YouTube
Kevin Powell
I never thought this would be possible with CSS
The
:has
(
) pseudo
-class is here
, and while it
βs often called the parent selector
, it can actually do a lot more than that
!
Links
Example One
:
https://codepen.io/kevinpowell/pen/jOxrjvW
Example Two
:
https://codepen.io/kevinpowell/pen/dyeXxJx
Example Three
:
https://codepen.io/kevinpowell/pen/ZEopzpP
Example Four
:
https://codepen.io
.
.
.
1
13eck
β’
9/29/22, 12:48 PM
(among other uses of
:has()
:has()
)
G
gunter
OP
β’
9/29/22, 4:36 PM
Thanks guys
!
@13eck
@Julio
_
M
MarkBoots
β’
9/29/22, 8:39 PM
indeed
, the
:has
(
) pseudo
-selector will do it
.
just for funzies
, there is a way to get ALL siblings before
(not your question
, i know
)
/* all siblings before target*/ .parent > :not(.target, .target~*) { color: red }
/* all siblings before target*/ .parent > :not(.target, .target~*) { color: red }
M
MarkBoots
β’
10/3/22, 7:13 PM
yea something like this
https://codepen.io/MarkBoots/pen/jOxKyRQ?editors=1100
M
MarkBoots
yea something like this https://codepen.io/MarkBoots/pen/jOxKyRQ?editors=1100
G
gunter
OP
β’
10/4/22, 4:43 AM
I was gonna ask
, could you explain that selector in words but
@Julio
_ worded it nicely
J
Julio
But the selector you used is more precise, selecting labels only: `.stars > labe...
G
gunter
OP
β’
10/4/22, 4:44 AM
So this is the starting point where we say
"except
"
?
:has()
:has()
/* all siblings before target*/
.parent
>
:not
(
.target
,
.target
~
*
) {
color
:
red
}
/* all siblings before target*/
.parent
>
:not
(
.target
,
.target
~
*
) {
color
:
red
}