3

I was wondering if there was a way to use css to style a wrapper a certain way ONLY if it had a div with a specific id inside. Let's say that I have 

<div class="intro_wrapper"></div>

in several places throughout the site but want to change the padding ONLY if it

<div class="intro_wrapper">
    <div id="slider"></div>
</div>

has #slider inside of it. The thing is that I want to make it have less padding when #slider is nested in it so I can't really mess with the margin for #slider without cutting off the content all weird. I tried using negative margins but it ends up cutting off the image I have in a weird way.

I know you can use stuff like p + p for paragraphs that have paragraphs following them, so I am assuming there may be a way to do something like I am trying to. Thanks in advance.

enano2054
  • 159
  • 3
  • 18
  • Unfortunately, no. But it seems there will be a ["subject" selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) in the future that would allow that (`.intro_wrapper! #slider`) – nice ass Jun 05 '13 at 22:03
  • Yeah I just found a post that said that will apparently be with CSS4?? – enano2054 Jun 05 '13 at 22:09
  • @OneTrickPony: [sort of, but not](http://www.w3.org/TR/selectors4/#profiles) (unfortunately); though I'm hoping this will be revised prior to CSS 4's actual release-candidate, ignored by browser vendors and implemented anyway or, perhaps (at worst) that CSS 4 will be a beta-test for implementation details, and it might be included in CSS 5 (for real). – David says reinstate Monica Jun 05 '13 at 22:09
  • Well, that's a shame because many people expect this functionality :( – nice ass Jun 05 '13 at 22:11
  • @OneTrickPony: absolutely. I *want this* (I'd also prefer to use the `:subject` pseudo-class, rather than arbitrary punctuation; it appears the working group live to frustrate my desires, however). – David says reinstate Monica Jun 05 '13 at 22:12
  • @DavidThomas 90% of my jQuery usage is because of the frustrating gaps in the capabilities of CSS selectors – Asad Saeeduddin Jun 05 '13 at 22:14

2 Answers2

4

You cannot do that with any CSS rules at this point as a reverse combinator to apply style on parent based on child. Instead you can hack it by adding a margin to the child instead.

div.intro_wrapper > #slider
{
  margin:20px;
}
PSL
  • 120,386
  • 19
  • 245
  • 237
  • Yeah my issue is a bit more complex than that but was using the padding just for sake of making the question easy to ask. – enano2054 Jun 05 '13 at 22:08
  • 1
    @user1470242 You should edit the question to remove that possibility for misinterpretation. – Asad Saeeduddin Jun 05 '13 at 22:11
  • @user1470242 there is no way at this point. So you can probably go with these lines something like adding a wrapper (which has margin) to the contents inside the `intro_wrapper` incase of your particular div's presence. But i don't know your scenario though. – PSL Jun 05 '13 at 22:11
  • Alright sorry about that. Still learning how to properly ask questions here – enano2054 Jun 05 '13 at 22:12
  • Oh well it did say "Let's say" but I bolded it to emphasize that it's more hypothetical. – enano2054 Jun 05 '13 at 22:14
  • @user1470242: can you edit the question to clearly explain what problem/situation you're trying to solve (or what effect you're trying to achieve)? That way, perhaps, we can avoid the closure of a (potentially/presumably) valid question. – David says reinstate Monica Jun 05 '13 at 22:16
  • @user1470242 That still doesn't highlight the fact that the property you want to change isn't specifically padding. – Asad Saeeduddin Jun 05 '13 at 22:16
  • Updated it. Hope that helps. – enano2054 Jun 05 '13 at 22:25
  • @user1470242: well, no: you've still not explained the actual problem that you're trying to solve. So, as yet, this should still be closed as a duplicate (which I don't want to do, since I'd rather help you address the problem and reach a solution that's of use to you and, hopefully, others in future). – David says reinstate Monica Jun 05 '13 at 22:30
  • 1
    @user1470242: I don't want to, I *want* to help; but I *can't*, because I, and others (as of writing), don't know what you're having trouble with (though we understand the broad outlines). If, however, *you* want to close the question, you may be able to click the 'delete' link below the question's tags. – David says reinstate Monica Jun 05 '13 at 22:39
  • 1
    I don't see why this is such a big issue? The question may not describe his problem clearly (or correctly) but there are at least a couple of useful answers here which seem to have helped him. Deleting the question would definitely be overkill imo – Sean Jun 05 '13 at 22:41
  • It's quite obvious he's asking for a parent-selector-type solution, all three answers so far have managed to pick up on this. – Sean Jun 05 '13 at 22:42
1

Whilst I think PSL's answer is already pretty good (cross browser, simple etc.) it doesn't help if you actually need to use a parent selector. Whilst at the moment it's best to avoid this when you can, there are definitely some circumstances which may require a parent selector (or some such alternative).

One solution if you absolutely have to use a parent selector would be jquery, its selector engine recongnises the :parent selector, for example you could do:

$("#slider:parent").addClass('padded_intro_wrapper');

Then in your CSS:

.padded_intro_wrapper
{
  padding: 20px;
}

Equally, if the #slider div isn't always inside the .intro_wrapper div you could do:

$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');

That's where it starts getting a bit messy though.

EDIT: Fiddle if you're feeling lazy

Sean
  • 6,141
  • 8
  • 43
  • 67
  • Cool... I'm not that great at jquery but I appreciate it. I'll see if I can figure out how to get that to work. – enano2054 Jun 05 '13 at 22:24
  • Added a fiddle if that helps :) – Sean Jun 05 '13 at 22:25
  • I wasn't sure if you'd be using jQuery or not (I don't use it with every project) so unfortunately this answer isn't universal, but as far as I know it's the only way to implement the parent selector as you described without a lot of hard work. – Sean Jun 05 '13 at 22:27
  • Oh sweet. Where would I put that on my page? Do I need to link to any script library or anything? – enano2054 Jun 05 '13 at 22:27
  • You'd need to link to jQuery somewhere on the page, most people recommend using the Google CDN for it: https://developers.google.com/speed/libraries/devguide#jquery – Sean Jun 05 '13 at 22:27
  • Other than that, just put either of the above snippets in a `script` block just before you closing `

    ` tag, and you should be good to go :)

     – Sean Jun 05 '13 at 22:28
  • And then I add the jquery between script tags? – enano2054 Jun 05 '13 at 22:29
  • Yep that's right, like this `` – Sean Jun 05 '13 at 22:31
  • No problem, glad I could help! – Sean Jun 05 '13 at 22:32