html - Selecting an element based on the presence of surrounding sibling elements -
i have following html structure.
<div class="fieldset"> <p>normal input<i class="icon-question tooltip-top" title="text goes here"></i></p> <div> <span><i class="icon-cart"></i></span> <input name=""> <span><i class="icon-cart"></i></span> <i class="icon-question tooltip-top" title="text goes here"></i> </div> </div> i trying change settings of border-radius according <input> positioned.
for example, if <input> has <span> before it, border-radius 0 top , bottom left.
i did using:
.fieldset > div > span + input { border-radius: 0 4px 4px 0; } but, when there <span> after <input> input border radius should 0 right top , bottom side. can't use + selector one.
how can achieve desired results when <span> after <input> without using javascript , altering html?
update:
following answers below , boltclock♦ methods - seems problem solved! image below demonstrate different scenarios , code used apply them.
scenario not yet working, when there 1 span before input.
the current css is:
/*fieldsets*/ .fieldset { width: 100%; display: table; position: relative; white-space: nowrap; margin-bottom: 15px; } .fieldset:last-of-type { margin-bottom: 0; } /*fieldsets > labels*/ .fieldset > p { width: 1%; margin-bottom: 3px; } /*fieldsets > input container*/ .fieldset > div { display: table-row; position: relative; } .fieldset > div > * { display: table-cell; white-space: nowrap; vertical-align: middle; position: relative; } /*fieldsets > input + icon*/ .fieldset > div > span { border: 1px solid #b0c2ce; padding: 5px 15px; font-weight: bold; width: 1%; } /*fieldsets > input + icon senarios*/ .fieldset > div > span:first-of-type { border-right: 0; border-radius: 4px 0 0 4px; } .fieldset > div > span:last-of-type { border-left: 0; border-radius: 0 4px 4px 0; } .fieldset > div > span:not(:only-of-type) + input { border-radius: 0; } .fieldset > div > span + input, .fieldset > div > span + textarea, .fieldset > div > span + select, .fieldset > div > span + .select-dropdown-single .select-dropdown-input, .fieldset > div > span + .select-dropdown-multi .select-input { border-radius: 0 4px 4px 0; } /*fieldsets > input + tooltip icon*/ .fieldset > div [class^="tooltip-"], .fieldset > div [class*=" tooltip-"] { text-align: center; width: 30px; } the html:
<div class="fieldset"> <p>normal input</i></p> <div> <input name=""> </div> </div> <div class="fieldset"> <p>normal input</p> <div> <span><i class="icon-cart"></i></span> <input name=""> </div> </div> <div class="fieldset"> <p>normal input</p> <div> <span><i class="icon-cart"></i></span> <input name=""> <span><i class="icon-cart"></i></span> </div> </div> <div class="fieldset"> <p>normal input</p> <div> <span><i class="icon-cart"></i></span> <input name=""> <span><i class="icon-cart"></i></span> <i class="icon-question tooltip-top" title="text goes here"></i> </div> </div>
normally, cannot target element preceding sibling of element regardless of html structure, because there no previous sibling selector.
however, given structure, there number of possible cases can still accounted using available you. if there @ 1 <span> on either side of <input>, or both sides, , no other <span> elements within <div> element, able target <input> in of these cases.
as given in question, when there <span> element appearing only before <input>, use adjacent sibling selector target <input>:
<div class="fieldset"> <p>normal input<i class="icon-question tooltip-top" title="text goes here"></i></p> <div> <span><i class="icon-cart"></i></span> <input name=""> <i class="icon-question tooltip-top" title="text goes here"></i> </div> </div> .fieldset > div > span + input { border-radius: 0 4px 4px 0; } when there <span> element appearing only after <input>, if causes <input> first child of parent <div>, can use :first-child target <input> in such situation:
<div class="fieldset"> <p>normal input<i class="icon-question tooltip-top" title="text goes here"></i></p> <div> <input name=""> <span><i class="icon-cart"></i></span> <i class="icon-question tooltip-top" title="text goes here"></i> </div> </div> .fieldset > div > input:first-child { border-radius: 4px 0 0 4px; } when <span> elements appear both before , after <input>, can use :not(:only-of-type) on first <span> adjacent sibling selector prevent matching first <span> in such situation:
<div class="fieldset"> <p>normal input<i class="icon-question tooltip-top" title="text goes here"></i></p> <div> <span><i class="icon-cart"></i></span> <input name=""> <span><i class="icon-cart"></i></span> <i class="icon-question tooltip-top" title="text goes here"></i> </div> </div> .fieldset > div > span:not(:only-of-type) + input { border-radius: 0; } as bonus, since you're dealing border-radius property, keep in mind can use longhands selectively avoid having deal third case (<span> on both sides) altogether:
.fieldset > div > input { border-radius: 4px; } .fieldset > div > span:only-of-type + input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .fieldset > div > input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } notice use of :only-of-type in case however, in order prevent selector matching if <span> elements present on both sides.
Comments
Post a Comment