0

I want to target a pseudoclass (::before) using an adjacent sibling selector with CSS. The node-bullet:before needs to be targeted using has-color as a reference.

Below is code, I wrote the pseudoclasses ::before and ::after to mimic what I see when I inspect html/css on the code I'm working with. 

.Node-bullet:before + .has-color {
 background-color: green;
}
<div class="foo1">
  <div class="Node-bullet">
  ::before
    <p> Pseudoclass ::before needs to be targeted </p>
  ::after
  </div>
  <div class="has-color">
    <p> Use .has-color class to target ::before class </p>
  </div>
</div>
Vincent Tang
  • 2,648
  • 3
  • 28
  • 49
  • 3
    You cannot target an element based on what follows it, only what precedes it. (*the pseudoclass is irrelevant here*) – Gabriele Petrioli Nov 13 '17 at 16:58
  • I don't see why its not possible using a `~` selector? The other threads suggest you can use that. What I don't understand is whether a pseudoclass is on the same level as a regular class when using `~` – Vincent Tang Nov 13 '17 at 17:22
  • 1
    The `~` selector selects only _following sibling elements._ It doesn't select _preceding_ sibling elements, and it doesn't select _any pseudo_ elements, since the pseudo elements are not parts of the _DOM tree_ (although in the _rendering tree_ they behave as if they were children of the element they are attached to). – Ilya Streltsyn Nov 13 '17 at 17:48
  • so `.Node-bullet:before` and `Node-bullet` wouldn't be treated on the same level assuming a previous sibling selector existed? – Vincent Tang Nov 13 '17 at 18:04

0 Answers0