Theo's Typesafe Cult•2y ago

css sibling selector

Given this HTML, how do I target the <div data-rehype-pretty-code-title> only if the SVG with data-language-icon is present? I'm guessing some ~ ?

3 Replies

juliusOP•2y ago

i only manage to target the icon and not the title :/

cornflour•2y ago

you can do this

[data-rehype-pretty-code-title]:has(+ [data-language-icon="true"]) {
  /* Your css here */
}

[data-rehype-pretty-code-title]:has(+ [data-language-icon="true"]) {
  /* Your css here */
}

or if the svg doesn't need to be the very next child

[data-rehype-pretty-code-title]:has(~ [data-language-icon="true"]) {
  /* Your css here */
}

[data-rehype-pretty-code-title]:has(~ [data-language-icon="true"]) {
  /* Your css here */
}

firefox doesnt seem to support has selector by default yet though :( https://caniuse.com/css-has

juliusOP•2y ago

Thanks 🙏

Gaming

Programming

css sibling selector