To select a specific parent tag.

[Yong]

Hi guys,

I need to select a specific parent tags of a website I’m working on.
I don’t know if there is a way to do it, but I’d like to ask here.

Here is my sample source.

• link 1
• link 2
• link 3
• link 4

I’d like to know if there is a way to select ONLY the li that has “apple” class children. It is a dynamic e-commerce website. The class “apple” could show up in multiple places and random order. So, I can’t use :nth-child(n) method.

Thank you,

[JohnMotylJr]

I think i am overthinking your question because i believe its a relativly easy fix. You just want to style your class with the li before it.

li .apple {

/* whatever styles you want */

}

http://jsfiddle.net/john_motyl/Z7Hdm/

is that what you are needing?

[Yong]

I think that selects `` tag instead of the `

[Paulie_D]

The answer is that there is NO parent selector but if you only have one list item with a class of ‘apple’ then the above option will work.

Otherwise you will just have to get more specific.

[Paulie_D]

li.apple

will only select list items with a class of ‘apple’

[TheDoc]

You cannot work backwards in CSS. I remember reading about parent selectors coming down the pipe, but I’m betting we’re still a couple years away from having support on that.

The simple solution here is to put the class on the list item.

Apple Link

This gives you total control over that list item. If you *can’t* modify the markup, then the only way you’re going to be able to select the parent `

` is through JS.

[Yong]

Thanks guys,

No, I can’t modify the markup. So, I think I have to find a way through JS.

Hope parent selectors coming soon. Don’t you guys think it would be useful?

[Paulie_D]

If the list items will ONLY contain links then

li a.apple

would work

On thinking about it, wouldn’t

li *.apple

select ANYTHING with a class of ‘apple’ inside a list?

[JohnMotylJr]

@paulie_d : Wasnt sure if you really wanted to know or not.. http://jsfiddle.net/john_motyl/Z7Hdm/2/

[TheDoc]

@Paulie_D – the OP is trying to select the list item itself, not any child elements.

[Paulie_D]

@TheDoc Yeah, but on thinking about that what is he proposing to DO with that li?

It might be that he’s asking the wrong question :)

[Yong]

@Paulie_D : My question is correct. I need to select and style the li. It is a dynamic e-commerce website and it’s little too complicated to explain here.

[Senff]

You can use jQuery, I’d say:

$(‘.apple’).parent().addClass(‘highlight’);

This will add a class “highlight” to the LI if it contains a child with class “apple”. Sounds kinda obvious, but the fact that it wasn’t suggested already makes me wonder if there’s something wrong with it…..?

[Yong]

Hi, Senff.

How do I embed the jQuery?

I just put it in < head > with < script > nesting.

But it doesn’t seem to work.

[Paulie_D]

My point was I know what you THINK you know what you want to do but without knowing what it is we can’t offer practical suggestions and it might be that there is a way to do it without selecting the li.

It’s like you asking “How do I pick up this hammer?”

I’m asking WHY you want a hammer in the first place. If it’s to drive in a screw then you are using the wrong tool.

However, I’ll leave that there.

[Author]

Posts