html - Apply style only to anchors defining links -

html - Apply style only to anchors defining links -

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"> sec part </a> </h2>

plus

a:hover {color: orange}

how can set <h2> tags (last 2) won't alter color when hover on them? because still need anchor tags there.

one alternative excluding <h2> parent elements :not() pseudo-class:

class="snippet-code-css lang-css prettyprint-override">:not(h2) > a:hover { color: orange; } class="snippet-code-html lang-html prettyprint-override"><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"> sec part </a> </h2>

where > direct descendant (child) combinator.

8.2. kid combinators

a kid combinator describes childhood relationship between 2 elements. kid combinator made of "greater-than sign" (u+003e, >) character , separates 2 sequences of simple selectors.

it's worth noting :not() pseudo-class is supported in ie 9 , newer.

avoid name attribute on <a>

you should note name attribute is obsolete in html5. instead utilize id element in order make bookmark.

hence can rid of redundant <a> elements caused trouble.

class="snippet-code-css lang-css prettyprint-override">a:hover { color: orange; } class="snippet-code-html lang-html prettyprint-override"><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 sec part</h2>

alternatively, if reason stick current markup, legacy web browsers such ie 8 , older, either override declaration:

h2 > a:hover { color: blue; }

or target <a> elements having href; i.e. select links.

class="snippet-code-css lang-css prettyprint-override">a[href]:hover { color: orange; } class="snippet-code-html lang-html prettyprint-override"><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"> sec part </a> </h2>

html css css-selectors anchor