1

HTML is like this:

<ul>
    <li>
        <a>Menu 1</a>
    </li>
    <li>
        <a>Menu 2</a>
        <ul>
            <li>Sub menu 2</li>
        </ul>
    </li>
    <li>
        <a>Menu 1</a>
    </li>
</ul>

How can I select an <a> tag that has a sibling <ul> tag after it, with pure CSS?

(Which, in the example above, will be <a>Menu 2</a>.)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
GusDeCooL
  • 5,639
  • 17
  • 68
  • 102

3 Answers3

2

Unfortunately, I don’t think you can.

  • CSS 2 includes the adjacent sibling selector (+), which allows you to select an element that immediately follows another element.

    E.g. a + ul would select your <ul> containing the text “Sub menu 2”

  • CSS 3 includes the general sibling selector (~), which allows you to select an element that follows another element, even if there are elements in between them.

    E.g. a + ul would select your <ul> containing the text “Sub menu 2” even if there was a <span> between the <a> and the <ul>

But neither has a selector that lets you select an element which has specific elements following it.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
-1

Possibly via nth-child

ul li:nth-child(2) a { color:#009; }

Selects the second list item, then subsequent anchor tags.

DEMO HERE

Scott
  • 21,475
  • 8
  • 43
  • 55
  • Nope, please read the question. Select A that have sibling UL. – GusDeCooL Sep 09 '12 at 19:37
  • @GusDeCooL THis allows you to select the anchor.. but there is no method to select parent elements with CSS. So the answer is -- with pure CSS you can't or you have to specify the anchor specifically. – Scott Sep 09 '12 at 22:30
-2

Here is a jsFiddle file you can reference LINK

CSS

ul > li > a {color:red}

ul > li > ul  {color:blue}​

HTML

<ul>
    <li>
        <a>Menu 1</a>
    </li>
    <li>
        <a>Menu 2</a>
        <ul>
            <li>Sub menu 2</li>
        </ul>
    </li>
    <li>
        <a>Menu 1</a>
    </li>
</ul>​
breezy
  • 1,910
  • 1
  • 18
  • 35