a:hover h3 color styling not working

Question

I have just spent a considerable amount of time working out why my h3's do not show the correct colour, or on hover.

.grid.item__listings > li > a h3.v-h3, 
.grid.item__listings > li > a:visited h3.v-h3, 
.grid.item__listings > li > a:active h3.v-h3 {
  color: #373533
}

With my HTML structure as follows:

<section>
    <ol class="grid item__listings">
        <li class="item two odd col-7 column">
             <a href="/">
                 <figure>
                     <img src="/images/listings/maven.jpg" />
                     <figcaption class="description">
                          <h4>Product
                           </h4>
                          <h3 class="v-h3">S O 5
                            </h3>
                      </figcaption>
                  </figure>
              </a>
          </li>
      </ol>
 </section>

In my Web Inspector, it marks it as finding the correct style colour, yet it is not applied?

In an environment of its own, the colouring works fine, but no other colour is being applied to my rule, so I can't see why it's not working.

Interstingly, on my body.is-black page it works fine.

web inspector view of correct colour being applied

.col-4 {
  width: 32%
}

.column {
  float:left;
  display:block
}

a, a:visited {
 color: #d3b553;
 text-decoration: underline
}

 a:hover, a:focus {
  color: #666
 }
 
h4 {
 color: #9c886d
}

h3 {
 font-family: 'Neue Haas Unica W01';
 font-weight: 400;
 font-size: 22px;
 font-size: 2.11rem;
 letter-spacing: .044rem;
}
 
 .item__listings .v-h3 {
 font-style: normal;
}

ul#primary__nav > li > a, ul#primary__nav > li a:visited, ul#primary__nav > li a:active,
ul#secondary__nav > li > a, ul#secondary__nav > li > a:visited, ul#secondary__nav > li a:active,
.grid.item__listings > li > a h3.v-h3, .grid.item__listings > li > a :visited h3.v-h3, .grid.item__listings > li > a:active h3.v-h3 {
 color: green
}

 ul#primary__nav > li > a:hover, ul#primary__nav > li > a:focus,
 ul#secondary__nav > li > a:hover, ul#secondary__nav > li > a:focus {
  color: #000
 }

.grid.item__listings > li > a:hover h3.v-h3, .grid.item__listings > li > a:focus h3.v-h3 {
 color: #d7a262
}

/* Styles for when body.is-black */

body.is-black ul#primary__nav > li > a, body.is-black ul#primary__nav > li > a:visited, body.ius-black ul#primary__nav > li a:active,
body.is-black ul#secondary__nav > li > a, ul#secondary__nav > li > a:visited, ul#secondary__nav > li a:active,
body.is-black .grid.item__listings > li > a h3.v-h3, .grid.item__listings > li > a:visited h3.v-h3, .grid.item__listings > li > a:active h3.v-h3 {
 color: #bab09b
}

 body.is-black ul#primary__nav > li > a:hover, body.is-black ul#primary__nav > li > a:focus,
 body.is-black ul#secondary__nav > li > a:hover, ul#secondary__nav > li > a:focus,
 body.is-black .grid.item__listings a:hover h3, .grid.item__listings a:focus h3 {
  color: #fff
 }

<ul id="primary__nav">
   <li>
     <a href="/">
       Menu
     </a>
   </li>  
</ul>
<section class="col-12">
                        <ol class="grid item__listings">
                            <li class="item two odd col-7 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/maven.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two even col-4 column right">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/haers.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two odd col-4-5 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/haya.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two even col-7 column right">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/ybk.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                             <li class="item two odd col-8 column">
                                <a href="/">
                                    <figure>
                                        <img src="/images/listings/lu.jpg" />
                                        <figcaption class="description">
                                            <h4>1
                                            </h4>
                                            <h3 class="v-h3">2
                                            </h3>
                                        </figcaption>
                                    </figure>
                                </a>
                            </li>
                        </ol>
                    </section>

Check the corresponding styling in Web Developer Tools. Which rule is applied instead? — raina77ow, Feb 21 '18 at 14:22
Are you sure it wasn't overridden by a higher priority style? Have you tried putting this HTML/CSS in an environment with no other styles? — Curtis, Feb 21 '18 at 14:22
@raina77ow I have added more to my question, the correct colour is being applied according to the web inspector — David, Feb 21 '18 at 14:39
@Curt it works in an environment on its own, but my web inspector does find the style... — David, Feb 21 '18 at 14:44
Note: `` tag does not use or need a closing slash and never has. — Rob, Feb 21 '18 at 15:03
why not just use `h3.v-h3` - it's probably down to specificity, using `h3.v-h3` is super specific so it will have a higher priority weight — treyBake, Feb 21 '18 at 15:04
@ThisGuyHasTwoThumbs if another CSS class was added to the h3 element, you'd have to write another rule would you not? — David, Feb 21 '18 at 15:08
It's not invalid. It's just not specified and never has been in any HTML spec. It does nothing, means nothing and browsers ignore it so it's useless and pointless. — Rob, Feb 21 '18 at 15:08
you can read this about `/>` (https://stackoverflow.com/questions/15149641/do-i-need-a-at-the-end-of-an-img-or-br-tag-etc)[https://stackoverflow.com/questions/15149641/do-i-need-a-at-the-end-of-an-img-or-br-tag-etc] — davecar21, Feb 21 '18 at 15:22

score 1 · Accepted Answer · answered Feb 21 '18 at 15:17

You need to style your link appropriately using LVHA-order.

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity. To style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

Please read this CSS :hover

Your style will really work when using h3.v-h3 because your are specifying the weight of the css declaration.

Please read this link about CSS Specificity

Please see a sample code below showing LVHA order and using css specificity that makes the hover works.

/* follow LVHA */
.lvha> a:link h3{
  color: gray;
}
.lvha> a:visited h3{
  color: yellow;
}
.lvha> a:hover h3{
  color: green;
}
.lvha> a:active h3{
  color: red;
}

/* Dont follow LVHA */
.not-lvha> a:hover h3{
  color: green;
}
.not-lvha> a:link h3{
  color: gray;
}
.not-lvha> a:visited h3{
  color: yellow;
}
.not-lvha> a:active h3{
  color: red;
}


/* Dont follow LVHA but use CSS Specificity */
.spec-lvha> a:hover h3.spec{
  color: green;
}
.spec-lvha> a:link h3{
  color: gray;
}
.spec-lvha> a:visited h3{
  color: yellow;
}
.spec-lvha> a:active h3{
  color: red;
}

<h4>If you are following LVHA order change your color to GREEN</h4>

<div class="lvha">
  <a href="#">
    <h3>I follow LVHA order</h3>
  </a>
</div>

<div class="not-lvha">
  <a href="#">
    <h3>I dont follow</h3>
  </a>
</div>

<div class="spec-lvha">
  <a href="#">
    <h3 class="spec">I dont follow but use CSS Specificity</h3>
  </a>
</div>

Hope this helps

score 0 · Answer 2 · answered Feb 21 '18 at 14:29

I'm not sure If I understand correctly but perhaps this help you

.grid.item__listings > li > a{
  text-decoration: none !important;
}

.grid.item__listings > li > a:hover h3.v-h3{
  color:red !important;
}

OR

.grid.item__listings > li > a h3.v-h3:hover{
  color:red !important;
}

Use the !important; to overwrite the previous Style alse. alse seans is in a <a> the default style will be from the a tag https://codepen.io/anon/pen/MQGGWY?editors=1111

`!important` usually means you're doing something wrong. – Niet the Dark Absol Feb 21 '18 at 14:40 — Niet the Dark Absol, Feb 21 '18 at 14:40

a:hover h3 color styling not working

2 Answers2