Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are my CSS properties being overridden/ignored?

I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of HTML.

<body>
  <section id="content">
    <article>
      <ul class="posts-list">
        <li class="post-item">
          <h2>[post title]</h2>
          <p class="item-description">...</p>
          <p class="item-meta">...</p>
        </li>
        ...
      </ul>
    </article>
  </section>
</body>

Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.

#content {
  color: #000;
  margin-left: 300px;
  max-width: 620px;
  padding: 0px 10px;
  position: relative;
}

#content p,
#content li {
  color: #111;
  font: 16px / 24px serif;
}

I wanted to style HTML within a ul.posts-list differently, so I wrote these rules.

li.post-item > * {
  margin: 0px;
}

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

However, I ran into some issues. Here is how Chrome is rendering the CSS:

Screenshot of how Chrome is rendering my CSS

For some reason, the rules #content p, #content li are overriding my rules for .item-description and .item-meta. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?

Edit: Also, where can I read up more about how this hierarchy works?

like image 768
kibibyte Avatar asked May 04 '12 04:05

kibibyte


People also ask

Why is my CSS style overridden?

If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS. In CSS terminology this concept is called Specificity. Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied.

Why is my CSS style not being applied?

Make sure that you add the rel attribute to the link tag When you add an external CSS file to your HTML document, you need to add the rel="stylesheet" attribute to the <link> tag to make it work. If you omit the rel attribute from the <link> tag then the style won't be applied to the page.

How do you override a property in CSS?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.


1 Answers

Elements id have the priority in CSS since they are the most specific. You just have to use the id:

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)

like image 165
tibo Avatar answered Sep 21 '22 21:09

tibo