-1

This may be a very stupid question, but I've been looking around on the web for a while and whilst I'm using proper syntax, my elements are not being selected in CSS.

I've made a standard sidebar and have it to the right of my screen with flexbox. I'm not looking for anything fancy, but my CSS broke when I renamed it to a class instead of selecting the aside selector, because I intend to use more aside elements and do not want same style on both of them.

Does anyone know how to fix?

.sidebar {
  flex: 1;
  background-color: white;
  align-self: stretch;
  border-left: 0.2em solid purple;
}

.sidebar h1 {
  margin: 1em;
  border-bottom: 0.2em solid purple;
}

.sidebar ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}
<aside class="sidebar">
  <h1>This is the sidebar.</h1>
  <p>Check out our awesome links!</p>
  <ul>
    <a href="home.html"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
    <a href="#"><li>Nav Item</li></a>
  </ul>
</aside>

The .sidebar itself works but .sidebar h1 and .sidebar ul does not.

8
  • 1
    validator.nu
    – Quentin
    Nov 10, 2019 at 15:26
  • 1
    missing a . in the second selector Nov 10, 2019 at 15:26
  • @TemaniAfif this was a formatting error it is not missing in my css file
    – sreaver
    Nov 10, 2019 at 15:27
  • now your code works fine, what's the issue? Nov 10, 2019 at 15:28
  • 1
    Did you use an ID instead of a class before? In this case, the relevance of your CSS selectors changed and .sidebar h1 might now be overwritten by an other CSS rule with a higher "weight" (e.g. a selector with two classes or with an ID).
    – Arno
    Nov 10, 2019 at 15:35

1 Answer 1

0

I have fixed it. I had overwritten my styles in a different part of my css file. Thanks everyone for the suggestions.

Not the answer you're looking for? Browse other questions tagged or ask your own question.