Strange CSS rendering issue

Question

I control the display of <a> elements with jquery. Based on some keystroke events, it adds or removes the <input> class (responsible for display control) that is related to the sister with the specified <a> .

The problem is that I have a selector that uses CSS + . And for some reason in Chrome (I'm not sure about other browsers, since I haven't tested it), it will not be a display:block element <a> if sibling <a> has a class.

HTML

 <div class="cont"> <input class="myInput"/> <label>S</label> <a>X</a> </div> 

CSS

 .cont { position: relative; } a { position: absolute; left: 117px; top: 3px; display: none; } label { position: absolute; left: 140px; top: 3px; } .has_typed + label + a { display: block; } 

Script

 $("input").on('keyup', function(){ var thiss = $(this); if (thiss.val() != 0 && !(thiss.hasClass('has_typed'))) { thiss.addClass('has_typed'); } else if (thiss.val() == 0) { thiss.removeClass('has_typed'); } }); 

The script is here: http://jsfiddle.net/aF4qt/1/

Answer 1

Edit:

 .has_typed + label + a { ... } 

To:

 .has_typed ~ label + a { ... } 

http://jsfiddle.net/JamesD/aF4qt/7/

Answer 2

If you do everything in jQuery, then why not do the rest using jQuery itself.

Try the following:

 $('.has_typed + label + a').show(); 

Not sure though why the same doesn't work in css

Working script

This will also work if you have multiple groups.

Tick fiddle

See details .