Specificity in CSS

Community
#1

I was wondering when styling our unordered list in our CSS code . header was styled instead of .header li? heres the code:

HTML:
nav class=“header”
ul
li a class=“home” href="#top">FAVORITE FONTS/a/li
li a class=“pagelink” href="#serif">SERIF/a/li
li a class=“pagelink” href="#sans">SANS-SERIF/a/li
li a class=“pagelink” href="#mono">MONOSPACED/a/li
/ul
/nav

CSS:

.header {
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.25;
background-color: #fff;
position: fixed;
top: 0;
width: 100%;
}

.header li {
display: inline-block;
}

Shouldn’t the .header li be taking most of the information like: font-family, font-size etc (instead of .header) since we’re specifically targeting the unordered list? (sorry if the HTML code is confusing i cant seem to paste the HTML code it doesn’t show up as code)

#2

Typically this is done to take advantage of the cascading effect of CSS, since the li elements will take on the properties of their parents unless those properties are overriden.

It’s more useful to do this when there are multiple child elements because it avoids duplicate code. Say, for example, there was a div element under the header element as well. Rather than set the background color for both the li elements and the div element, you could set it once for the header element to have it cascade down to the children.

People might have multiple strategies for this, but I try to set my styles as far up in the tree as possible, usually setting things like colors and font styles for the html tag so they apply everywhere. I use the children to apply styles in special cases, like buttons.

1 Like
#3

The forums uses markdown as part of its display system and because of this, HTML is either rendered or ripped from the post. In order to format your code so it is displayed as raw text you can hit this button:

Then copy paste your code between the two lines of backticks:

1 Like