How to change adjacent selector to nested

Question

I have custom switches that I borrowed from this site: http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

Unfortunately, I use a useful plugin that I cannot easily modify, which fills my DOM with nested input inside the label in such a way that ...

<label> <input class="regular-radio"> 

I would like to use the .regular-radio + label selector to select a label. However, it only works with:

 <input class="regular-radio"> <label> 

I demonstrated my example here: http://jsfiddle.net/BR3MB/

How can I change this CSS to work with the parent label and not the neighboring one? In this case, it would be very difficult for me to edit the DOM, since it already relies a lot on this structure.

Answer 1

Unfortunately, this is currently not possible using CSS, since CSS is only read from right to left. This means that the rightmost element in the selector will be the one who receives the styles, and the rightmost element should always be a child or child of any element to the left of it in the selector. The problem with this for you is that the element you want to create is the parent.

There is a parent selector in the work ( http://www.red-team-design.com/css-parent-selector ), but before that you will have to resort to using JavaScript.

With that said, I believe that the best solution in this case is to change the plugin output to something more useful (if at all possible).

Answer 2

Unfortunately, there is no CSS selector for the parent style. The only way to get the parent style is through Javascript. In CSS tricks, Chris Coyer talks about the advantages and disadvantages of the discussion about whether or not this selector is added to the specification. Personally, I would like it to exist, but I do not want my code to work.

Answer 3

In CSS, it is not possible to select a parent element. You may need to use something like this:

 label:nth-of-type(x) {} 

Where x is the label number in the parent.