I'm having trouble using :nth-child in a content select and in researching
came across this thread. Hearing that nth-child may become unsupported is a
concern for me as well. Is that the case? If not, are their current issues
around nth-child that I can review as I'm having trouble applying it.
On Tuesday, February 4, 2014 5:00:44 PM UTC-8, Sergey Shevchenko wrote:
>
> What is supposed to replace :nth-child then? What I want is:
>
> <my-element>
> <div></div>
> <div></div>
> </my-element>
>
> and then inject something between the two <div>s in the element's
> definition.
>
> Anyway, :host([attr="xyz"]) content[select=":nth-child(1)"]::content > *
> doesn't
> work for me either - I've tried in Dartium 31 and 32, are those too much
> behind? I've ended up with this awful hack for now:
>
> <polymer-element name="my-element" attributes="attr">
> <template>
> <style>
> @import url("my_element.css");
> </style>
>
> <dev id="marker" attr="{{attr}}"></dev>
> <content select=":nth-child(1)"></content>
> ...
> </polymer-element>
>
> #marker[attr="xyz"] ~ content[select=":nth-child(1)"]::content > * {
> font-style: italic;
> }
>
> On Tuesday, February 4, 2014 4:55:05 PM UTC-8, Eric Bidelman wrote:
>>
>> Should people be using position selectors (e.g. :nth-child) for insertion
>> point selects? I thought those were going to be unsupported soon.
>>
>>
>> On Tue, Feb 4, 2014 at 4:50 PM, Justin Fagnani <[email protected]>wrote:
>>
>>>
>>> On Tue, Feb 4, 2014 at 4:47 PM, Daniel Freedman <[email protected]>wrote:
>>>
>>>> :host[ .. ] doesn't work because the rule crosses the shadowdom style
>>>> encapsulation boundary.
>>>> :host( [ .. ] ) is allowed to cross the boundary.
>>>>
>>>> :host( ) was changed to only look at the host element, removing the
>>>> ancestor walk (that functionality was given to ::ancestor(), we're working
>>>> on a better name).
>>>>
>>>
>>> Ah, much more clear now. Thanks!
>>>
>>>
>>>>
>>>>
>>>> On Tue, Feb 4, 2014 at 4:43 PM, Justin Fagnani <[email protected]>wrote:
>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Tue, Feb 4, 2014 at 4:22 PM, Steve Orvell <[email protected]>wrote:
>>>>>
>>>>>> Here's a simplified example:
>>>>>>
>>>>>> http://jsbin.com/aXojEti/1/edit
>>>>>>
>>>>>>
>>>>>> On Tue, Feb 4, 2014 at 4:20 PM, Steve Orvell <[email protected]>wrote:
>>>>>>
>>>>>>> :host may only be qualified via parens, like this:
>>>>>>> :host([attr="xyz"])
>>>>>>>
>>>>>>> So, this should work:
>>>>>>>
>>>>>>> :host([attr="xyz"]) content[select=":nth-child(1)"]::content > * {
>>>>>>> font-style: italic;
>>>>>>> }
>>>>>>>
>>>>>>
>>>>> I think this would give a very different behavior than intended.
>>>>> Sergey is trying to change layout based on an attribute on the host, if
>>>>> he
>>>>> instead matching on that attribute on any ancestor, then it can't compose.
>>>>>
>>>>> Why doesn't :host[...] work? :host and pseudo-classes work.
>>>>>
>>>>>
>>>>>
>>>>>>
>>>>>>>
>>>>>>> On Tue, Feb 4, 2014 at 4:11 PM, Sergey Shevchenko <
>>>>>>> [email protected]> wrote:
>>>>>>>
>>>>>>>> Hi there,
>>>>>>>>
>>>>>>>> I have the following Polymer element definition:
>>>>>>>>
>>>>>>>> <polymer-element name="my-element" attributes="attr">
>>>>>>>> <template>
>>>>>>>> <style>
>>>>>>>> @import url("my_element.css");
>>>>>>>> </style>
>>>>>>>>
>>>>>>>> <content select=":nth-child(1)"></content>
>>>>>>>> ...
>>>>>>>> </polymer-element>
>>>>>>>>
>>>>>>>> What I need is a CSS selector that would match my <content>, but
>>>>>>>> only when the `attr` attribute on the host element is "xyz". I've
>>>>>>>> tried all
>>>>>>>> these:
>>>>>>>>
>>>>>>>> :host[attr="xyz"] content[select=":nth-child(1)"]::content > * {
>>>>>>>> font-style: italic;
>>>>>>>> }
>>>>>>>>
>>>>>>>> :host[attr="xyz"] > content[select=":nth-child(1)"]::content > * {
>>>>>>>> font-style: italic;
>>>>>>>> }
>>>>>>>>
>>>>>>>> content[select=":nth-child(1)"]::content[attr="xyz"] > * {
>>>>>>>> font-style: italic;
>>>>>>>> }
>>>>>>>>
>>>>>>>>
>>>>>>>> None of these worked. At the same time, each of the two
>>>>>>>> sub-selectors works individually:
>>>>>>>>
>>>>>>>> :host[attr="xyz"] {
>>>>>>>> font-style: italic;
>>>>>>>> }
>>>>>>>>
>>>>>>>> content[select=":nth-child(1)"]::content > * {
>>>>>>>> font-style: italic;
>>>>>>>> }
>>>>>>>>
>>>>>>>> So I'm just looking for the right way to combine them.
>>>>>>>>
>>>>>>>> Thanks!
>>>>>>>>
>>>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>>>>> ---
>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>> Groups "Polymer" group.
>>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>>> send an email to [email protected].
>>>>>>>> To view this discussion on the web visit
>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/39068648-7a20-4fd5-bbfa-79bdb1715671%40googlegroups.com
>>>>>>>> .
>>>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>>> ---
>>>>>> You received this message because you are subscribed to the Google
>>>>>> Groups "Polymer" group.
>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>> send an email to [email protected].
>>>>>> To view this discussion on the web visit
>>>>>> https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgWa_-fAsSRALkhbFWJPHTHxZwJ3SSUei9BPEkfWyQ7Ng%40mail.gmail.com
>>>>>> .
>>>>>>
>>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>>
>>>>>
>>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>>> ---
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "Polymer" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>>> an email to [email protected].
>>>>> To view this discussion on the web visit
>>>>> https://groups.google.com/d/msgid/polymer-dev/CAEKsHmBZk41mtebBZvmJ146QOE_VBskbzVbRNoiHRcNO7YWURw%40mail.gmail.com
>>>>> .
>>>>>
>>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>>
>>>>
>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>>> ---
>>>> You received this message because you are subscribed to the Google
>>>> Groups "Polymer" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send
>>>> an email to [email protected].
>>>> To view this discussion on the web visit
>>>> https://groups.google.com/d/msgid/polymer-dev/CAAUAVAgRwLgoPaktweHfJmcsm5VH2NSNz-92xUCZ%2BMPevo70Tw%40mail.gmail.com
>>>> .
>>>>
>>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>>
>>>
>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>> ---
>>> You received this message because you are subscribed to the Google
>>> Groups "Polymer" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/polymer-dev/CAEKsHmAckAB0J5ggn0RUOF8Lp3x%2BgFAidazo5RKbbiz8tq0Lag%40mail.gmail.com
>>> .
>>>
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>
>>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/270d2744-8e1c-4303-abb0-b7e7edbd29fb%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
