Select an element only when it has a child with a specific class

Question

I have this markup:

<div class="container page-content">

</div>

normally the class page-content has a padding:

.container.page-content{
    padding-top: 160px;
}

But at a specific page there is a class "item-pagehome" inside my div:

<div class="container page-content">
   <div class="item-pagehome">
     Some Content ... 
   </div>
</div>

And in this special case I want to disable the padding-top of the .page-content. But how can I do this?

I try to select:

.page-content:has(> .item-pagehome){
   padding-top: 0px;
}

But this does not working ...

How can I select a div only when it is a specific child class, in this case .item-pagehome?

yes, exactly... I want select the parent div. Or (when this is not working or the proper way) I want to select the div only when it has a spectfic child — goldlife, Aug 02 '16 at 15:13
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Nenad Vracar, Aug 02 '16 at 15:13
FYI: Unfortunately there is currently no such css selector: https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4 — alexanderbird, Aug 02 '16 at 15:13
He is looking to affect the child based on child position, not the parent. — Daniel Springer, Aug 02 '16 at 15:15
@DaniSpringer, I'm not sure that's true - the parent has the padding, and when the parent has a certain child he wants to remove the parent's padding. goldlife, is this correct? — alexanderbird, Aug 02 '16 at 15:17
@goldlife, is it an option to add an additional class to the parent when the child is present? Is a JavaScript solution an option? Is the html being generated dynamically, or is this a static website? — alexanderbird, Aug 02 '16 at 15:20
If the duplicate vote is about the css parent selector question, this is really not the same... OP says 'I want to do X and I tried Y, but Y doesn't work', where 'Y' is the parent selector option. — alexanderbird, Aug 02 '16 at 15:22
Based on your comment to my (deleted) answer: THAT you surely can't do. Not yet with only CSS. look into JavaScript. — Daniel Springer, Aug 02 '16 at 15:23

score 2 · Answer 1 · answered Aug 02 '16 at 15:14

2

.container.page-content .item-pagehome {
    margin-top: -160px;
}

answered Aug 02 '16 at 15:14

Michael Benjamin

That might work on a very specific case, but note that the negative margin of the child won't always result the same way for the parent... It's a hacky solution, and I won't recommend using this approach for real projects... – Narxx Aug 02 '16 at 15:17
1

interesting answer ... but this does not work in my case. – goldlife Aug 02 '16 at 15:18
@Narxx, just one method that may be helpful, in this case or another. – Michael Benjamin Aug 02 '16 at 15:18
@Michael_B It's not really a method, and using negative margins for such cases are rarely justified and very hard to maintain. It might solve rare edge cases (non I can think of right now) but in general cases (as StackOverflow answers strive to address), this is not a recommended approach (in my own opinion). – Narxx Aug 02 '16 at 15:22
I got your point @Narxx. We're not in disagreement. It's just a final CSS option before pivoting to scripts or re-structuring the HTML. Also keep in mind: Negative margins exist for a reason, and it's often to compensate for another element's box model properties. – Michael Benjamin Aug 02 '16 at 15:26
@Michael_B I believe there has to be a proper way to achieve his requirement without going to JS or negative margins, but we don't know his need. His question is very specific about something that simply cannot be done: "How can I select a div only when it is a specific child class, in this case .item-pagehome?" :) – Narxx Aug 02 '16 at 15:28

score 1 · Answer 2 · answered Aug 02 '16 at 15:14

1

It cannot be done using CSS.

CSS is Cascading Style Sheet (cascading: from top to bottom). You can only effect the last element in the CSS selector.

The condition you are looking for can be done using JavaScript, but this is outside the scope of your question.

answered Aug 02 '16 at 15:14

Narxx

is there no way doing this by css? – goldlife Aug 02 '16 at 15:15
FYI: I don't think that's what the "cascading" part in CSS means http://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css – alexanderbird Aug 02 '16 at 15:15
Well this just isn't correct, see the tilde `~` selector as just one example. – Chris W. Aug 02 '16 at 15:16
@chris so can I do this with the ~ selector? if yes, how? – goldlife Aug 02 '16 at 15:19
@ChrisW. If you use `p ~ p` then it again, only effect the last `
` element.
– Narxx Aug 02 '16 at 15:19
@goldlife The answer is NO. You cannot do what you are after (and I wish you could, really). CSS simply doesn't work that way. You probably can style your page in a different way that both address your needs, and won't break CSS. – Narxx Aug 02 '16 at 15:20
Ah sorry I'm thinking in the sense of overriding, had to actually tinker to manifest into a workaround example like [this](http://codepen.io/anon/pen/JKayxK). – Chris W. Aug 02 '16 at 15:42

2 Answers2