Select :after pseudo from child by using '+' selector

Question

Is it possible to select parent :after pseudo class from child by using '+' selector.

HTML:

<div class="parent">
    <span class="child">Child</div>
</div>

CSS:

.parent:after{
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: blue;
}

.child + :after{ // targeting parent after
    background-color: red;
}

EDIT: To explain what I wanted to achieve - basically, I wanted to change label:after styling when checkbox is checked.

HTML:

<label class="parent">
    <!--label:before-->
    Click me to check me
    <input class="child">
    <!--label:after-->
</label>

No...because it's not an **element** it's styling and so can't be selected like that. — Paulie_D, Jul 01 '20 at 09:22
considering the fact that after is always *after* all the elements, you don't need any selector. Applying background-color:red to after is enough — Temani Afif, Jul 01 '20 at 09:32
With the + selector you are not even selecting neither the child or the parent. you are selecting the next element on the same "level". There is no selector for a parent element. — RacoonOnMoon, Jul 01 '20 at 09:33
@Paulie_D I just wanted to create CSS checkbox by having input inside label. When checkbox is checked it would restyle the label:after. label > checkbox + label:after — dodo254, Jul 01 '20 at 09:46
@RacoonOnMoon Level 1: label; Level 2: label:before, input[type=checkbox], label:after - checkbox and label:after are on the same level — dodo254, Jul 01 '20 at 09:49
Yeah, you can't do that it would be a *parent selector* and those don't exist, yet! — Paulie_D, Jul 01 '20 at 09:49
Its ways better to ask what you **actually** want rather than give *pseudo-code*, it will get you more accurate answers quicker. — Paulie_D, Jul 01 '20 at 09:50
@Paulie_D yeah, sry for that. I edited the question. Thank you for your answer. — dodo254, Jul 01 '20 at 09:56
Take a look at this asnwer https://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked you can just add after/before .check-with-label:checked + .label-for-check:after, html changes needed — RacoonOnMoon, Jul 01 '20 at 09:59
Well thats OK but there is no answer because as I said, there is no parent selector. So what you want is not possible without changing the hTML — Paulie_D, Jul 01 '20 at 09:59
@RacoonOnMoon I know there are other ways to achieve what I wanted, but my question is not how to achieve it. I just wanted to know if it is possible to select pseudoclasses this way. Still...thank you for your efforts. — dodo254, Jul 01 '20 at 10:03

Amir Meimari · Answer 1 · 2020-07-02T04:38:16.360

As far as I know, there is no way to select and change the parent style from the child [July of 2020]. it would be awesome if they add it to CSS! for more info check out this question.

so I think you change the structure of your HTML to achieve what you want. take a look at this working example:

HTML:

<div class="checkbox-container">
  <input id="checkbox" type="checkbox" />
  <label for="checkbox"></label>
</div>

CSS:

.checkbox-container label {
    background-color: #000;
    width: 30px;
    height: 30px;
    display: block;
    padding: 10px;
  }

  .checkbox-container label::after {
    content: 'foo';
    color: #fff;
  }

  .checkbox-container input {
    display: none;
  }

  .checkbox-container input:checked + label::after {
    content: 'bar';
    background-color: red;
  }

basically you need to put label and checkbox at the same level. having a wrapper element (in this case div element) is optional.

Select :after pseudo from child by using '+' selector

1 Answers1