Wednesday, 15 April 2015

CSS: Is "p div.myclass" a valid selector? -



CSS: Is "p div.myclass" a valid selector? -

is p div.myclass valid css selector? i'd select div.myclass when descendent of p.

<body> <div class="myclass">do not select</div> <p> <any>... <div class="myclass">select element set background & border <any>other stuff may here</any> </div> </any> </p> </div> <!-- added after question answered --> </body>

it's valid selector, yes; div not valid kid of p element. css valid, html you're applying selector invalid.

incidentally, apart nested div within p, you've got unclosed div wrapping p, followed </body> tag. html doubly-invalid, tags must closed in reverse order in they're opened.

addenda, raised in comments (i wasn't going bother adding originally, instead planning focus on syntax of css), browser (certainly chromium 24/ubuntu 12.10) 'rescues' html when constructs dom, go this:

<p> <any>... <div class="myclass">select element set background & border <any>other stuff may here</any> </div> </any> </p>

to dom looks (again, in chromium 24/ubuntu 12.10):

<p> <any>...</any> </p> <div class="myclass">select element set background &amp; border <any>other stuff may here</any> </div> <p></p>

js fiddle demo.

therefore if problem have, , reason you're asking question, css isn't selecting/styling element, reason because you're using invalid html, , browser's changing html while constructing (valid) dom, means selector no longer matches targeting.

this why html validity rules should followed, makes easier work (both today, , in future when you, or else has to, revisit).

oh, , finally, & character should not used in html directly, should encoded in way, such &amp;, because & character first character in html character-entity codes. so...you've created triply invalid html.

css css-selectors

No comments:

Post a Comment