Newbie question
in [CSS]
|
From: gpadu99 on 11 Feb 2010 05:45 Can somebody explain to me what is this: *+html .Selector1 .Selector2, *+html .Selector3 .Selector4 { background-image: url('anImage.gif'); } what does the "*+html" symbol means? Also why is there a comma in the first line? I mean, would it be the same if we write: *+html .Selector1 .Selector2 .Selector3 .Selector4 { background-image: url('anImage.gif'); }
From: Jonathan N. Little on 11 Feb 2010 12:51 gpadu99 wrote: > Can somebody explain to me what is this: > > *+html .Selector1 .Selector2, > *+html .Selector3 .Selector4 > { > background-image: url('anImage.gif'); > } > > what does the "*+html" symbol means? http://lmgtfy.com/?q="*+html"+css+hack Looks like a CSS hack, IMO one should avoid CSS hacks they will most assuredly bite you in the backside later down the road. > Also why is there a comma in the > first line? I mean, would it be the same if we write: > > *+html .Selector1 .Selector2 .Selector3 .Selector4 > { > background-image: url('anImage.gif'); > } No they are not the same, the comma separates selectors. For demonstration let's ignore the stupid "*+html" part which means "apply when the html element a directed descendant to something." Since html is the base element it is not a child of anything else the rule is invalid. Conforming browser ignore the whole rule, but legacy version IE just ignore the error and apply the rule, hence the hack. Now to the differences of ..Selector1 .Selector2, .Selector3 .Selector4 { ... } and ..Selector1 .Selector2 .Selector3 .Selector4 { ... } Rule #1 applies to all elements of class "Selector2" that are descendants of element of class "Selector1" *or* applies to all elements of class "Selector4" that are descendants of element of class "Selector3" <div class="Selector1"> <div class="Selector2">Applied!</div> </div> <div class="Selector3"> <div class="Selector4">Applied!</div> </div> But rule #2 only applies to all elements of class "Selector4" that are descendants of element of class "Selector3" which are also descendants of element of class "Selector2" which are also descendants of element of class "Selector1"! <div class="Selector1"> <div class="Selector2"> <div class="Selector3"> <div class="Selector4">Applied!</div> </div> </div> </div> May be of help: http://www.w3.org/TR/CSS21/selector.html -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: dorayme on 11 Feb 2010 15:33 In article <hl1g1l$6k0$1(a)news.eternal-september.org>, "Jonathan N. Little" <lws4art(a)gmail.com> wrote: > Since html is > the base element it is not a child of anything else Sort of like Adam or Eve. -- dorayme
From: Ed Mullen on 11 Feb 2010 22:21 dorayme wrote: > In article<hl1g1l$6k0$1(a)news.eternal-september.org>, > "Jonathan N. Little"<lws4art(a)gmail.com> wrote: > >> Since html is >> the base element it is not a child of anything else > > Sort of like Adam or Eve. > Oh, Lord, now commences a great theological debate! Umm, technically, isn't Eve a descendant of Adam? Or, at least, of his rib? -- Ed Mullen http://edmullen.net Boycott shampoo! Demand the REAL poo!
From: gpadu99 on 12 Feb 2010 04:20
On Feb 11, 6:51 pm, "Jonathan N. Little" <lws4...(a)gmail.com> wrote: > gpadu99 wrote: > > Can somebody explain to me what is this: > > > *+html .Selector1 .Selector2, > > *+html .Selector3 .Selector4 > > { > > background-image: url('anImage.gif'); > > } > > > what does the "*+html" symbol means? > > http://lmgtfy.com/?q="*+html"+css+hack > > Looks like a CSS hack, IMO one should avoid CSS hacks they will most > assuredly bite you in the backside later down the road. > > > Also why is there a comma in the > > first line? I mean, would it be the same if we write: > > > *+html .Selector1 .Selector2 .Selector3 .Selector4 > > { > > background-image: url('anImage.gif'); > > } > > No they are not the same, the comma separates selectors. For > demonstration let's ignore the stupid "*+html" part which means "apply > when the html element a directed descendant to something." Since html is > the base element it is not a child of anything else the rule is invalid. > Conforming browser ignore the whole rule, but legacy version IE just > ignore the error and apply the rule, hence the hack. > > Now to the differences of > > .Selector1 .Selector2, .Selector3 .Selector4 { ... } > > and > > .Selector1 .Selector2 .Selector3 .Selector4 { ... } > > Rule #1 applies to all elements of class "Selector2" that are > descendants of element of class "Selector1" > > *or* > > applies to all elements of class "Selector4" that are descendants of > element of class "Selector3" > > <div class="Selector1"> > <div class="Selector2">Applied!</div> > </div> > > <div class="Selector3"> > <div class="Selector4">Applied!</div> > </div> > > But rule #2 only applies to all elements of class "Selector4" that are > descendants of element of class "Selector3" which are also descendants > of element of class "Selector2" which are also descendants of element of > class "Selector1"! > > <div class="Selector1"> > <div class="Selector2"> > <div class="Selector3"> > <div class="Selector4">Applied!</div> > </div> > </div> > </div> > > May be of help: > > http://www.w3.org/TR/CSS21/selector.html > > -- > Take care, > > Jonathan > ------------------- > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com Thanx Jonathan, your post was very helpful. |