CSS Selectors - change width if last image id is X -
i try several hours figure out how change width of class if there image id before element.
currently code looks that
<blockquote> <img id="bp_avatar" src="..."> <p>text</p> </blockquote
the problem image been dynamicly inserted, in cases there in other wont. tried wrap image inside text, fit blockquote p needs width of 90%.
so here issue, should 90% if it's there , 100% if not there. use css instead of jquery, found on w3 documents level 4 selectors , tried use them, goal apply style if #bp_avatar there.
so tried ways
#bp_avatar ~ #bluepostq blockquote p { width: 90%!important; } #bluepostq blockquote p! > #bp_avatar{ width: 90%!important; }
none of them worked yust nothing happens, think missunderstood , hope tell me have done wrong.
using ~
correct, need use bit differently:
p { width: 100%; } #bp_avatar ~ p { width: 90%; }
this make p
100% width if preceded #bp_avatar
90%.
if attempting limit within element (maybe #bluepostq
isn't in sample html) go first in selector:
#bluepostq #bp_avatar ~ p {
additionally, if know p
next element after #bp_avatar
, can use adjacent sibling selector:
#bp_avatar + p {
blockquote{ border: 1px solid red; } p{ border: 1px solid blue; display: inline-block; width: 100%; } img{ border: 1px solid green; } #bp_avatar ~ p { width: 90%; }
<blockquote> <img id="bp_avatar" src="..."> <p>text</p> </blockquote> <blockquote> <p>text</p> </blockquote>
Comments
Post a Comment