Not exactly an answer to the posed :nth-child question, but I just wanted
to confirm that the following selector works for me now, at a minimum with
Dartium 33 and Chrome 34 dev:
:host([attr="xyz"]) content[select=":nth-child(1)"]::content > * {
font-style: italic;
}
On Thursday, February 27, 2014 10:00:02 AM UTC-8, Steve Warren wrote:
>
> 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/f8ebfed6-2d33-4c33-93ce-e3fcfd38ca47%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
