General CSS targeting question

Good afternoon,

I’m working through a tutorial for a side navigation menu, and the CSS is like this:

.side-menu {

            font-family: Arial, Helvetica, sans-serif;

            list-style: none;

            border: 1px #dddddd solid;

            border-radius: 10px;

            width: 300px;

            padding: 20px;

        }

        

        .side-menu li {

            font-size: 18px;

            line-height: 2.4em;

            border-bottom: dotted 2px #dddddd;

        }

        

        .side-menu li:last-child {

            border: none;

        }

        .side-menu li a {

            color: #333333;

            text-decoration: none;

        }

        .side-menu li a:hover {

            color: coral;

    

        }

What I don’t understand about CSS, in general, is why I couldn’t just put the .side-menu li a items in with the .side-menu items. Like text-decoration in this case. I figured that if I targeted a parent and changed a property value, all children would do the same thing unless I targeted the children and changed that same property’s value.

So if I set text decoration to none in .side-menu here, the anchors are still underlined, which seems counter-intuitive to me. Or am I doing something else wrong or looking at things in the wrong way?

Not all CSS properties are inherited by child elements, though. :slight_smile:

text-decoration is not an inheritable property, so you need to apply a CSS ruleset specifying text-decoration to override the default style.

If you look at the text-decoration specifications on MDN you’ll see that it’s not inherited.

Setting the rule on a parent element which has class="side-menu", with a li child element which in turn has an anchor (a) child itself won’t apply the rule to the anchor element. It needs to be applied directly, as you’ve found, though you can force inheritance. :slight_smile:

1 Like

Ah. So some things are inherited and some things aren’t. Kinda like with people. Seems like an odd way to write a style language that seems to rely heavily on parents and children and trunks and branches and twigs and such, but it is what it is I suppose. Thanks for clearing that up. :slight_smile:

1 Like