4

I have 2 types of labels, normal labels like the first line, and labels that contain a input field within them. What CSS rule can let me select all <label> but exclude all labels that happen to contain <input> within?

<label for="type">Some Label</label>

<label for="type">
   <input type="checkbox" value="1" id="type">Some Label
</label>
sameold
  • 18,400
  • 21
  • 63
  • 87

2 Answers2

2

The best way of doing this woult be adding different classes to them or at least to one of them.

CSS hasn't a parent selector, so you can't check for an element that contains other withour some javascript.

Some background:
CSS selector for "foo that contains bar"?
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child

Community
  • 1
  • 1
Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
  • Yeah. As I've said, you don't have to create a second class. You can create 1 class and apply it to the lable without the input. – Ricardo Souza Jul 01 '12 at 07:16
2

The "adjacent sibling" selector should work, IF you are looking for label+input pairs:

label+input
{
    /* rules */
}

This would ignore your label-nested inputs, unless there happens to be an input after a label that has an input within it.

See Sitepoint's CSS reference: http://reference.sitepoint.com/css/adjacentsiblingselector

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
  • 1
    @sameold The problem with this it that its not IE6 and 7 compatible. If this is not a problem for you, you can define the styles for all lables and overide the ones next (right after or right before, not wrapping) to a input. – Ricardo Souza Jul 01 '12 at 07:19
  • @rcdmk Ah, true. I've developed a bit of a bad habit of forgetting about those two... good catch. – Tieson T. Jul 01 '12 at 07:21