How to choose an input tag if you follow the span tag?

Question

I want to select an input tag followed by a span :

HTML:

 <input type="text"/> <span> ... </span> 

CSS:

 input [followed span] { padding:5px; (set input padding, only when followed by span) } 

Answer 1

You can use the + selector to select all the <span> elements that are placed immediately after the <input> elements

 input + span { background-color: yellow; } 

 <input type="text"> <span>test</span> 

---

If you want to select <input> , which is placed before <span> . this is not feasible in css since

Cascading style sheets: a cascade is like a waterfall, no reverse movement. So, of course, that there is no previous siblings selector in CSS.

Read more https://www.wikitechy.com/technology/previous-sibling-css-selector/

---

what you can try is .prev() jQuery ..

 $(document).ready(function(){ $('span').prev().css('background','yellow'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"> <span>test</span> 

For more information about .prev() https://www.w3schools.com/jquery/traversing_prev.asp

Answer 2

This will return the contents in the span tag, but you need to indicate which input tag you are pointing to either with the class or with an identifier for the exact result.

 $("input").closest("span").html() 

Answer 3

You can make an adjacent selector using:

 input + span { opacity: 0; transition: all 0.3s; } 

or you can make a generic selector using:

 input ~ span { opacity: 0; transition: all 0.3s; } 

Read more ... http://cssmenumaker.com/blog/10-handy-css-selectors/

Answer 4

CSS does not offer "do" selectors. The only solution would be to add a class to each element and its style, or do it using jquery as follows:

 .inputs_before_span { color: #0cc; } $('span').prev('span').addClass('inputs_before_span') 

Answer 5

Use this css:

 .wrapper { position: relative; } input { padding-left: 48px; } .wrapper span { position: absolute; left: 2px; } 

Html:

 <div class="wrapper"> <input type="url" placeholder="eg www.google.com" /> <span>http://</span> </div> 

Source: Show intermediate input using HTML + CSS