Apply style only to anchors defining links

Question

I have this

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2> <a name="first"> First part</a> </h2>
<h2> <a name="second"> A second part </a> </h2>

plus this

a:hover {color: orange}

How can I set it so that the <h2> tags (last 2) won't change color when I hover over them? Because I still need the anchor tags there.

Sorry to disappoint, it's not homework. I followed a tutorial and was wondering if this was possible and I couldn't find any solution by searching. — Florin, Oct 17 '14 at 22:20

score 2 · Accepted Answer · edited May 23 '17 at 12:27

One option would be excluding <h2> parent elements by :not() pseudo-class:

:not(h2) > a:hover { color: orange; }

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2> <a name="first"> First part</a> </h2>
<h2> <a name="second"> A second part </a> </h2>

Where > is the direct descendant (child) combinator.

8.2. Child combinators

A child combinator describes a childhood relationship between two elements. A child combinator is made of the "greater-than sign" (U+003E, >) character and separates two sequences of simple selectors.

It's worth noting that :not() pseudo-class is supported in IE 9 and newer.

Avoid `name` attribute on `<a>`

You should note that name attribute is obsolete in HTML5. You could instead use id to an element in order to make it a bookmark.

Hence you can get rid of redundant <a> elements which caused the trouble.

a:hover { color: orange; }

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2 id="first">First part</h2>
<h2 id="second">A second part</h2>

Alternatively, If by any reason you would like to stick with the current markup, for legacy web browsers such as IE 8 and older, you could either override the declaration:

h2 > a:hover { color: blue; }

Or target only <a> elements having an href; I.e. only select links.

a[href]:hover { color: orange; }

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2> <a name="first"> First part</a> </h2>
<h2> <a name="second"> A second part </a> </h2>

:not(h2) a:hover { color: orange; } doesn't work for me, although the second solution does. Thanks! — Florin, Oct 17 '14 at 22:02
@Florin I updated the answer, you should use child combinator instead. — Hashem Qolami, Oct 17 '14 at 22:06

score 1 · Answer 2 · answered Oct 17 '14 at 21:57

Actually, by your HTML provided, you could follow a lot of patterns here. Depends on your scenario.

Apply only to anchors descendand of h1:

h1 a:hover {color: orange; }

Apply only to anchors that doesn't descendand from h2:

:not(h2) a:hover {color: orange; }

Apply only to anchors that are descendant of the first 2 h's, not the last 2

:nth-child(4n+2) a:hover {color: orange; }

Apply only to anchors that have a name, instead of a href

a[name]:hover {color: orange; }

The possibilities are endless.

Sweet! And applying to anchors that have href? That would ease it up :) — Florin, Oct 17 '14 at 22:16

score 0 · Answer 3 · answered Oct 17 '14 at 21:50

0

You can apply h2's color as important. For ex. h2{color: #000 !important}

answered Oct 17 '14 at 21:50

Aqib1604

272
1
7

There's still color changing on hovering over h2 tags with this solution. – Florin Oct 17 '14 at 22:01

Apply style only to anchors defining links

3 Answers3

Avoid name attribute on <a>

Avoid `name` attribute on `<a>`