Can i select div's containing an inputfield?

Question

I was wondering if I can select a div when it has an input field as a child.

Here is the HTML I am using:

<div class="xxx">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">my title</h3>
      </div>
      <div class="panel-body">
        <div class="row">
            <div class="col-md-5">some content</div>
            <div class="col.md-7">some content</div>
        </div>
        <div class="row">
            <div class="col-md-5">some content</div>
            <div class="col-md-3">
                <input type="text" class="form-control" id="date" />
            </div>
        </div>
      </div>
    </div>
</div>

Bootstrap adds a padding and margin to all div blocks if they have col-* classes. What I want to achieve is that, if a div contains an input field, then the margin and padding should be set to 0px.

So the main question is: "Can I select a div according to his content?"

I have tried div[class*="..."] and div[class^="..."], but neither is solving my problem.

CSS doesn't really have a :has, :contains or parent selector, so me thinks you can't. — adeneo, Jul 21 '14 at 12:44
Possible duplicate: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — Casey Falk, Jul 21 '14 at 12:47

score 3 · Answer 1 · answered Jul 21 '14 at 12:40

3

Try to use :has() selector,

$('div:has(:input)')

Or you can use,

$(':input').filter(function(){
  return $(this).parent('div').length;
}).parent();

answered Jul 21 '14 at 12:40

Rajaprabhu Aravindasamy

66,513
17
101
130

don't get me wrong.. sorry... i want a selector in css – Dwza Jul 21 '14 at 12:42
2

@Dwza Then why did you tag this question with jquery.? – Rajaprabhu Aravindasamy Jul 21 '14 at 12:43
2

Note that in the posted markup, almost all the DIV's would match this, as they all have an input, being nested and all. – adeneo Jul 21 '14 at 12:43
@adeneo Yeah, i too thought of that, now provided an alternate to it. – Rajaprabhu Aravindasamy Jul 21 '14 at 12:45
@Dwza http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar this would help you – Rajaprabhu Aravindasamy Jul 21 '14 at 12:46
`$('div > input').closest('div')` seems simpler, I haven't tested it though. – adeneo Jul 21 '14 at 12:46
1

or `$('div > input').parent()`. – Karl-André Gagnon Jul 21 '14 at 12:46
comon guys what will be the css selector for this? – Jai Jul 21 '14 at 12:48
i just ready this is not available in the css today, but will be available in the css4. – Jai Jul 21 '14 at 12:48
I heard it would be one of those in CSS 4 or 5 : `input ^ div, div! input, div:has(input)` – Karl-André Gagnon Jul 21 '14 at 12:50
guys... its nice seeing you discussing my problem. but, i already sayed, i have no problem with jquery and i don't want to use it for this task :) – Dwza Jul 21 '14 at 12:50
@Dwza: Then fix the tag. – Casey Falk Jul 21 '14 at 12:52
i already did. guess it came back in because someone edited my question at the same time. i still give a +1 for this answere because if i would use jquery for this... this would obviously help :) – Dwza Jul 21 '14 at 12:53

score 3 · Accepted Answer · answered Jul 21 '14 at 12:48

3

You can choose an alternate strategy. You can add a class to those div and use css rule to apply zero padding and margin.

<div class="col-md-3 zero-padding-margin">
            <input type="text" class="form-control" id="date" />
        </div>

And

  .zero-padding-margin {
margin: 0;
padding: 0;
}

answered Jul 21 '14 at 12:48

Amit

91
3

this is how im dooing it atm. seems like i can't come around using extra classes for this. – Dwza Jul 21 '14 at 12:52

Can i select div's containing an inputfield?

2 Answers2