-2

Is there a way that I can select parent item using css? I mean my structure is this

<label>
  <input />
<label>

In my css I am trying to do something like this,

input['_type_']:checked _parent_ label:after{
  some css
}

I cannot use, attribute for in label.

mohsinali1317
  • 4,255
  • 9
  • 46
  • 85

1 Answers1

0

Unfortunately there is no parent selector in CSS but you can put label after input and do something like this (using the adjacent sibling combinator, "+", in your selector).

HMTL:

<input />
<label><label>

CSS: 

input['_type_']:checked + label:after{ /*means the element that follows input*/
    some css
}

You can also do some ugly hacky trick and put another label inside your label

JSFiddle

HTML: 

<label>
  click me
    <input type="checkbox"  />
  <label>color</label>
</label>

CSS:

input[type="checkbox"]:checked + label {
    color: red;
}

This way you can click label and do some stuff with another label that goes after the input.

HTH.

Konrud
  • 1,114
  • 9
  • 19
  • but doing it like this won't check the input element when the label is clicked. Because it is not associated with any input element. – mohsinali1317 Jul 04 '16 at 12:39
  • You can do some hacky trick (if you cannot using `for` attribute) and put another label inside you label like in this example: https://jsfiddle.net/Konrud/bg0jbear/ – Konrud Jul 04 '16 at 12:46
  • thanks a lot. But I ended up making a custom binder as I am using knockout. It worked for me and the code was not ugly as I would except it to be if using jquery. – mohsinali1317 Jul 05 '16 at 06:10