Change the style of an input only when it is followed by a span

Question

How can I target the <input> only when there is <span> after it?

<fieldset>
   <p>Normal Input</p>
   <div>
     <input name="">
     <span><i class="icon-cart"></i></span>
   </div>
</fieldset>

input + span {} would only work if the <span> was before the <input> but in this case it is after the <input> - Is there a way to target it without using JavaScript or adding classes to the parent container?

enter image description here

As you can see in the image below, I just want to change the input border-radius so it merge with the span icon us like on all the other scenarios.

change the order of the markup, then float right the span and float left the input — Fabrizio Calderan, Apr 01 '15 at 16:45
If there is no i element here unlike in your previous question, you could try `input:only-child`. — BoltClock, Apr 01 '15 at 17:35

StudioTime · Answer 1 · 2015-04-01T16:30:34.260

1

If you want to add a class say, you could use JQuery like this:

$('span').prev('input').addClass('test');

Or to add a border-radius:

$('span').prev('input').css('border-radius','3px');

edited Apr 01 '15 at 16:30

answered Apr 01 '15 at 16:19

StudioTime

20,816
34
110
202

Can I do that without using JavaScript please? – Leo Apr 01 '15 at 16:35
Not unless you can add classes to the HTML - not as far as I know anyway – StudioTime Apr 01 '15 at 16:38
Thank you, there is a way but it is really complex CSS - I am nearly there now. Thank you for your help :) – Leo Apr 01 '15 at 16:39
Ok cool, can you post your answer when you figure it out? Would be interested in seeing that – StudioTime Apr 01 '15 at 16:42

Change the style of an input only when it is followed by a span

1 Answers1