0

I am trying add some CSS rule which ONLY selects the elements which have the href attribute ends with "/exclusive".

It works OK like this:

#nav li.level0.level-top > a[href$="/exclusive"] { color: #E51837; }

But when try to apply a rule in the li element which is 1 level upper, it doesn't seem to work. I tried adding selectors like (:parent, :before, :has) but nothing:

#nav li.level0.level-top > a[href$="/exclusive"]::before { float: right; }

HTML:

<ul>
    <li class="level0 nav-9 level-top parent">
        <a class="level-top" href="/moto">
            <span>Moto</span>
        </a>
    </li>
    <li class="level0 nav-10 last level-top">
        <a class="level-top" href="/exclusive">
            <span>Exclusive</span>
        </a>
    </li>
</ul>
Alex Bogias
  • 1,826
  • 2
  • 30
  • 45
  • 1
    There are no parent selectors in CSS. So, you cannot style the `li` based on the `a` with CSS alone. You need scripting. – Harry Apr 03 '16 at 13:05
  • Do you want to target any anchor elements with a href that ends with `/exclusive` Or only those nested within `#nav li.level0.level-top` ??? – aphextwix Apr 03 '16 at 13:05
  • Only the nested ones that contains the exclusive – Alex Bogias Apr 03 '16 at 13:06
  • I think that I did this before but maybe yeah I used jquery. Isnt possible by just CSS? :( – Alex Bogias Apr 03 '16 at 13:06
  • Ok thanks a lot guys – Alex Bogias Apr 03 '16 at 13:08
  • So what exactly do you want ? Please be specific. I can see that you're changing the link color and then you also want a pseudo element added `::before` the matching link? – aphextwix Apr 03 '16 at 13:10
  • With jquery `$('li').has('a[href$="/exclusive"]')` – Nenad Vracar Apr 03 '16 at 13:11
  • @aphextwix I want to add "float: right" ONLY to the li element with the exclusive href and not to the "a" – Alex Bogias Apr 03 '16 at 13:13
  • 1
    @Alexandros - Oh sorry I misunderstood. As the others have explained, there is currently no parent selectors in CSS3. See this article for further explanation - https://css-tricks.com/parent-selectors-in-css/. You'll need to use Javascript to target the parent element. – aphextwix Apr 03 '16 at 13:21
  • I want to float right, this specific top level menu tab. I tried the parent but don't work `#nav li > a[href$="/exclusive"]:parent { float: right; }` – Alex Bogias Apr 03 '16 at 13:32

0 Answers0