0

enter image description here

.deco {
  padding-bottom: 1em;
  background-color: red;
}

.pros-cons .column:nth-child(2):is(img) .deco   {
    padding-bottom: 0;
}
<div class="pros-cons">
  <div class="column">
    <p class="deco"></p>
    <figure>
      <img>
    </figure>
  </div>
</div>
.pros-cons .column:nth-child(2):is(img) .deco   {
    margin-bottom: 0;
}

Hey, I've been trying to target the second class within a nested container to disable the bottom margin ONLY if the second element is an image. What am I doing wrong here, because it doesn't seem to be working? Is this use of multiple pseudo selectors not valid in CSS3? It doesn't work with figure either.

Devon
  • 33
  • 7
  • Fixed. Sorry, I haven't had to do this in the past for my other questions, so I didn't know. – Devon Sep 18 '21 at 19:37
  • 1
    The image is NOT a nth-child(2)....it's really not clear what you are trying to do. – Paulie_D Sep 18 '21 at 19:41
  • 1
    Be aware there is no such thing as `nth-of-class` which I *think* is what you are trying to do. – Paulie_D Sep 18 '21 at 19:42
  • 1
    I looks like OP is actually trying to style a previous sibling element - which is not possible with CSS. @Devon update your description to use the class names you use in your code, rather than the vague "second class" description. It's unclear what you're actually after. – disinfor Sep 18 '21 at 19:51
  • I'm trying to target the second child of the .column class, and remove margin(or padding) from the p.deco class IF the second child element is an img or figure. The class names are what I use in my code, and the p.deco is the first child of the div.column. – Devon Sep 18 '21 at 19:53
  • 2
    You can't do what you want. That's a previous element selector. You would need to put the padding/margin on the `figure` or `img` instead and then remove it from those elements if they *follow* the `.deco` element. – disinfor Sep 18 '21 at 19:56
  • Yeah, For some reason I can't accept it as an answer. – Devon Sep 18 '21 at 20:01
  • You don't accept other question/answers. You upvoted the accepted answer on the duplicate question and you close/remove this question. – disinfor Sep 18 '21 at 20:02
  • Sorry, I meant your response. – Devon Sep 18 '21 at 20:03
  • @Devon you don't have to accept it as an answer, since it's only a comment. This question should still be closed, since it is a duplicated of the one I commented with. – disinfor Sep 18 '21 at 20:28

1 Answers1

1

You could better add a padding top to the second child element and remove it if it is an image. Als in your html the second child of .pro-cons is a figure not an image, so I’ve changed that for you.

.pro-cons .column:nth-child(2) {
    padding-top: 1em;
}

.pro-cons figure:nth-child(2) {
    padding-top: 0;
}

.deco {
    background-color: red;
}
Casper Kuethe
  • 1,070
  • 8
  • 13