CODEWITHSUNDEEP
htmlcsscss-selectors
Péter
Péter

Reputation: 2181

CSS element pseudo not overwrite child element style

So I want to style an anchor element what contains other html elements. The base code is:
HTML:

  <div class="container" id="sub-menu">
    <div class="row" data-bind="foreach: subMenu">
      <a href="#">
        <div class="col-md-3 col-sm-6">
            <h3><span>title</span></h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</div>
        </div>
      </a>
    </div>
  </div>

The bootstrap classes do not bother you :)
And here is the CSS (generated from less):

#sub-menu {
  margin-top: 10px;
}
#sub-menu a span {
  color: black;
}
#sub-menu a div {
  color: #6b6b6b;
}
#sub-menu a:hover {
  color: red !important;
  text-decoration: none;
}

The goal was when the user hover over the anchor the text color should be red. With this solution the red color not applied but the text decoration works well. Here is a fiddle edition
If I set the color on the a level than it works good (fiddle) or not set the color at all (fiddle), but I need to set different color for the title and the body part.
I also tried to set the hover pseudo for each element (fiddle demo) but it's ugly that the decoration works all of them but the color only applied if I hover over the exact element. I want to achieve the second version, but with custom color like the first version.
Thanks for any help.

EDIT: I forget to explain that an icon also be in the h3 tag so that is why the title in a span tag.

Upvotes: 0

Views: 216

Answers (1)

anurupr
anurupr

Reputation: 2344

if you're trying to color all the elements contained in the anchor element this should work

#sub-menu a:hover *{
    color: red;
}

Upvotes: 1

Related Questions