Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

selecting <label> but excluding <label> that contain <input>

Tags:

css

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>
like image 542
sameold Avatar asked Sep 13 '25 11:09

sameold


2 Answers

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

like image 55
Ricardo Souza Avatar answered Sep 15 '25 01:09

Ricardo Souza


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

like image 45
Tieson T. Avatar answered Sep 15 '25 00:09

Tieson T.