2

I have something like this:

<li> 
    <a href="http://google.pt">google</a>
</li>
<li>
    <h3>Hello World</h3 
</li>

and I'd like to apply a border to all <li> that have an <a> inside. But I can't use an id because this code needs to work for any page and I can't control the ids. Is this possible via CSS?

edit: ok lets give some context. i am making a firefox plugin that would change the mouse when you move over a link. the problem is that on some pages like google if i add the css to the <a> tag it wont work on some of the links

rob180
  • 892
  • 1
  • 10
  • 27
  • 4
    Yes, with CSS classes... – Bojangles Feb 20 '13 at 17:11
  • @Bojangles - no, it's not. There's no "parent" seletor (yet) in CSS. OP would need to use JavaScript. – j08691 Feb 20 '13 at 17:19
  • You say you can't use IDs, but can you use classes? Or are you looking to just use CSS without modifying the HTML at all? – j08691 Feb 20 '13 at 17:21
  • I believe this question has been asked and answered here: http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child – micflan Feb 20 '13 at 19:14

4 Answers4

3

This isn't possible purely with CSS if you can't edit HTML. It involves going down the cascade, to the a, then back up to style the li, which CSS can't do (yet). You'll need to use javascript/jquery to get that "going up" functionality.

Or alternatively, make the a 100% width and height of the li, and then just apply the border to the a

Andy
  • 13,875
  • 3
  • 46
  • 76
  • 1
    If you want to use jQuery: `$("li:has(a)")` or to select by text content `$("li:contains('blah')")` – Jonny Sooter Feb 20 '13 at 17:21
  • In general, you are right but your second sentence can be misleading because CSS selectors are evaluated from right to left, i.e. going up the cascade. – bancer Feb 20 '13 at 18:13
1

Try something like this:

li > a {
    border: 1px solid red;
    display: block;
    height: 100%;
    width: 100%;
}

Demo: jsFiddle

Update: CSS selectors are evaluated from right to left. So, when the browser is looking for li it does not look at it's children but look at it's parent. Why we don't have a parent selector.

bancer
  • 7,040
  • 7
  • 35
  • 57
  • Not what OP wants. He only wants the border if `li` has a child `a`, he can't put a class on it. – Andy Feb 20 '13 at 17:37
  • I don't see any class there, and that does look like it only borders `li` if it has a child `a`... – Joe Feb 20 '13 at 17:38
  • Andy, there is no class here. Someone edited my answer with a wrong link. – bancer Feb 20 '13 at 17:38
  • @bancer Ah ok. Well you are putting the border on the `a` here, not the `li`. `li > a` converts to "all `a` tags with an `li` parent` – Andy Feb 20 '13 at 17:39
  • @Andy, that's right. But the effect is the same as if you put the border on `li`. – bancer Feb 20 '13 at 17:40
  • @bancer That's not what OP asked, he wants the border on the li. The effect is only the same in this case, it may be different in OP's case – Andy Feb 20 '13 at 17:40
0

In it's own / your own CSS class:

.hasLink{
    border-radius: 3px;
}

Reference the class on your html (assuming we call this main.css):

<link href="/Content/styles/main.css" rel="stylesheet" type="text/css" />

Then whenever you have a <li> with <a>:

<li class="hasLink">

  <a href="http://google.pt">Google</a>

</li>

Does that help? I'm not sure if you wanted something smarter than that maybe...

Phoenix
  • 41
  • 1
  • 6
0

You can use this:

.someClass{ border: 1px solid #anycolor;}

And your html

<li class="someClass">
   <a href="#">Something</a>
</li>

<li>
   <h3>other</h3>
</li>
Camilo Aguilar
  • 139
  • 1
  • 11