1

Code will be like

<label for="bar">Baz: <input type="text" name="bar" id="bar" class="foo"/></label>

I would like to style the label how do I select with CSS?

jerrygarciuh
  • 18,340
  • 23
  • 77
  • 126
  • Short answer: you can't. – Paolo Bergantino Apr 18 '13 at 15:36
  • 1
    Use JQuery and you can. – Uncle Iroh Apr 18 '13 at 15:37
  • Uncle can you add example as answer? – jerrygarciuh Apr 18 '13 at 15:37
  • 1
    This is a CSS question, why are we bringing up jQuery again? Unless he has a reason he can't modify the HTML, doing this with Javascript is way unnecessary. – Paolo Bergantino Apr 18 '13 at 15:38
  • Well you can't select a parent in css – Uncle Iroh Apr 18 '13 at 15:40
  • 2
    @jerrygarciuh: If you wanted to use jQuery, you could do $('.foo').closest('label').addClass('foo_label'); (assuming you had all your labels set up as parents of the input) and then style the label with .foo_label { .. } in CSS. But, again, it'd be much better to modify the HTML if possible... – Paolo Bergantino Apr 18 '13 at 15:40
  • ^^ there is your example...thanks @Paolo. Sure it's nice if you can just manipulate the html, but frankly I don't know why people these days manually doing front end stuff wouldn't use jQuery. It's pretty much the best thing for front-ends since sliced bread ;) – Uncle Iroh Apr 18 '13 at 15:41
  • 1
    If you want to style the label that has a child tag with an id="bar". You cannot do it using css2 or css3. You can do it using jQuery/Javascript. Please take a look at this answer: http://stackoverflow.com/a/1901332/1182823 – Adil Malik Apr 18 '13 at 15:43
  • 1
    OK guys. Thanks. Will modify HTML generation routine. – jerrygarciuh Apr 18 '13 at 15:44
  • 1
    Please look at this fiddle: http://jsfiddle.net/jSKvy/ – Adil Malik Apr 18 '13 at 15:46
  • 1
    This will be possible if/when [CSS Selectors Level 4](http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/) are supported. There is a `parent` selector! But, if you _happen to be using jQuery already_ there is a [plugin](https://github.com/Idered/cssParentSelector) that will parse the parent selector in CSS files. Personally, I would change the markup to suit your needs for now and wait for CSS Level 4 to be standardised. – andyb Apr 18 '13 at 15:47
  • @UncleIroh: Why bog down your Javascript with silly things that can easily be achieved without it? jQuery is nice, but people take it too far. – Paolo Bergantino Apr 18 '13 at 15:50
  • @Paolo - readability, compatibility. You almost certainly need it's more powerful features elsewhere. It can be cached if everyone uses's Google's provided hosted link. Frankly I've never seen jQuery bog down anything...but then I don't get too crazy with my jQuery and you obviously have been around longer than I have. – Uncle Iroh Apr 18 '13 at 15:58
  • @UncleIroh: Nothing is more compatible than having your HTML actually be what you want it to be versus modifying it after the fact with jQuery :) I'm not arguing against having jQuery on your site - I haven't deployed a site without jQuery since it came out - I've just joined projects where it starts with something like this and next thing you know you're taking shortcuts to doing things the right way because it's so much easier to throw it on with jQuery. – Paolo Bergantino Apr 18 '13 at 20:28
  • @Paolo Well said. I agree with you. – Uncle Iroh Apr 18 '13 at 20:45

2 Answers2

2

There is currently no way to select a parent element using css alone. This will be possible in the upcoming css 4 (Thanks andyB)

So you really have 2 other options:

  1. Modify the html so that you have a handle on the parent so that you can style it.

  2. Use javascript to select the parent based on the child's css/id/name attribute.

Uncle Iroh
  • 4,961
  • 4
  • 43
  • 55
0

Like so:

label[for="bar"] { color: red; }

This will target the label for "bar". It's a CSS2.1 selector, and it works in everything except IE6.

See example on jsFiddle: http://jsfiddle.net/TheNix/kTwDN/

Nix
  • 5,202
  • 3
  • 24
  • 44