I'm trying to get to the .dropdown::after
element but only if the first child has the attribute x-placement
set to bottom-start
.
<div >
<ul x-placement="bottom-start"
...
</ul>
<button >
Enter salutation...
</button>
::after
</div>
It seems to me that something like this should work, but unfortunately neither solution will work:
.js-dropdown [x-placement^=bottom] ~ ::after {
background: red;
}
.js-dropdown [x-placement^=bottom] ::after {
background: red;
}
Is this even possible?
.js-dropdown [x-placement^=bottom] ~ ::after {
background: red;
}
.js-dropdown [x-placement^=bottom] ::after {
background: red;
}
EDIT:
solved by
.js-dropdown {
&.show {
&:after {
content: '';
position: absolute;
left: 1px;
right: 0;
height: 1px;
background: $white-color;
width: calc(100% - 2px);
z-index: 13;
}
&:has([x-placement^=bottom]) {
&:after {
bottom: 0;
}
}
&:has([x-placement^=top]) {
&:after {
top: 0;
}
}
}
}
CodePudding user response:
Sure you can, use the CSS :has() pseudo class:
.dropdown::after { content: "I'm an after pseudo element"; }
.js-dropdown:has([x-placement="bottom-start"])::after {
background: red;
}
<div >
<ul x-placement="bottom-start">
<li>...</li>
</ul>
<button >Enter salutation...</button>
</div>