Re: [css-inline-nth-child()] Adding nth-child functionality in inline styling?

On 18/09/14 14:19, abhimanyu0003 wrote:
> I can't add a |nth-child(n)| declaration while applying inline styles to
> an element (which, obviously, contains multiple elements).
>
> For example, suppose I have a |div| that contains three |p| elements.
>
> The general stylesheet rules would go like this:
>
> div p:nth-child(2) {   color: blue; }
>
> But what if I need to colour the second paragraph blue while applying an
> inline style to the containing |div|? Should we add this functionality?
> Because if you say "just apply a style to the second p element for God's
> sake," then I don't really agree that it's a good solution. Suppose the
> content of the div is dynamically updated and we just need the second p
> to be blue, what now?
>
> In other words, should targetting child selectors with inline styles be
> accepted?
>
> In yet other words, should we trash the virginity of inline styles? An
> inline style necessarily targets just one element: on whom it's been
> applied. That's pretty much why it's an inline style. It makes perfect
> sense. But well, when I look at the problem I gave at the top, I think
> we need something here.

By "inline style", do you mean the style attribute of elements? If you 
want something with selectors, it’s very different from what the style 
attribute currently is, closer to a stylesheet.

In fact, it seems you want a scoped stylesheet:

<div>
   <style scoped>p:nth-child(2) { color: blue }</style>
   <p>Not blue
   <p>Blue
   <p>Not blue
</div>
<p>Not blue

The scoped attribute makes the style element not apply outside of its 
parent (the div).

The spec is there, but implementations not quite yet:
http://caniuse.com/#feat=style-scoped

As a work around, you could prefix selectors with an ID or some other 
selector that uniquely selects the div. style elements still work 
anywhere in the document.

<div id=camoulox>
   <style>#camoulox p:nth-child(2) { color: blue }</style>
   ...

-- 
Simon Sapin

Received on Thursday, 18 September 2014 16:07:09 UTC