Forums

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.

  <ul>
      <li><a>link 1</a></li>
      <li><a class="apple">link 2</a></li>
      <li><a>link 3</a></li>
      <li><a>link 4</a></li>
  </ul>

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 <a class="apple"> tag instead of the <li>. Am I right? I need to select and apply a style to <li>, not <a>.

Thanks,

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.

  <li class="apple"><a href="#">Apple Link</a></li>

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 <li> 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.

Senff

@Yong: you'll need to load a jQuery library and then call the code after the page has loaded. I could give you a step-by-step manual but I recommend you check out a tutorial at http://www.jquery.com, so you'd know what you're doing.

@Paulie_D: see what you mean, but I've had situations where I really needed to select a parent element if the child element had some class or other condition. Can't remember what it was exactly, but just saying that it does happen sometimes! ;)

chrisburton

@Yong Try this:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
      $('.apple').parent().addClass('highlight');
  </script>

joshuanhibbert

I agree with @Paulie_D. If you can share a bit more information, I'm sure we can find a way to do what you want using the anchor instead of the list-item. Otherwise, I would suggest using a pure JS solution. Calling the entire jQuery library just for this is overkill.

treehouse : what would you like to learn today?

Forums

[Solved] To select a specific parent tag.