I can't seem to change the color inside a list and span (css)-CodePudding

I want to change the color of the text from the class logos, I just can't seem to be able to change the color of these specific items. I have tried to remove the color from the *, I also tried !important. The last thing I tried was to move the .logos CSS to the top and that didn't work either. Any ideas of how I can change the color of the .logos class?

The .logo values can be found at the bottom of the stylesheet.

* {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: white;
  background-color: rgb(rgb(255, 232, 232), green, blue);
}

header {
  position: fixed;
  width: 100vw;
  height: 85px;
  background-color: #201f2f;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
}

header .inner {
  width: 1300px;
  height: 100%;
  display: block;
  margin: 0 auto;
}

header .logo {
  display: table;
  height: 100%;
  float: left;
}

header .logo div {
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

header .logo div h1 {
  color: white;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header .logo div p {
  color: #83838a;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header nav {
  float: right;
  height: 100%;
}

header .logo img {
  height: 50px;
  margin-top: 5px;
  /* Optical alignment of the logo */
}

header nav {
  float: right;
  height: 100%;
}

header nav li {
  display: table;
  height: 100%;
  float: left;
  margin-right: 30px;
}

header nav li:last-of-type {
  margin-right: 0;
}

header nav span {
  display: table-cell;
  vertical-align: middle;
}

.logos {
  color: rgb(169, 255, 138)
}

<html lang="en">

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="https://kit.fontawesome.com/33bdf0ac68.js" crossorigin="anonymous"></script>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" href="images/Logo.png" />
  <title>Nicolas Lonoño</title>
</head>

<body>
  <header>
    <div >
      <div >
        <div>
          <h1>Nicolas Lonoño</h1>
          <p>Speaker</p>
        </div>
      </div>

      <nav>
        <li>
          <span ><a href="">Home</a></span>
        </li>

        <li>
          <span><a href="">Blog</a></span>
        </li>

        <li>
          <span><a href="">Biography</a></span>
        </li>

        <li>
          <span ><a href=""><i ></i></a></span>
        </li>

        <li>
          <span ><a href=""><i ></i></a></span>
        </li>

        <li>
          <span ><a href=""><i ></i></a></span>
        </li>

      </nav>
    </div>
  </header>
</body>

</html>

CodePudding user response：

There are two issues here. Firstly is that you're styling the color with the * selector which is changing every single element. You've wrapped an icon in an anchor in a span with a class of 'logos' but rather than inheriting the color, it's already styled with the * selector.

The other thing is that if you've got anchor links then you have to style the pseudo classes as follows:

.logos,
.logos a:where(:link, :visited, :hover, :active)  {
  color:rgb(169, 255, 138)
}

Or even use the 'inherit' value as follows:

 .logos {
      color: rgb(169, 255, 138);
    }


.logos a:where(:link, :visited, :hover, :active) {
  color: inherit;
}

But for icons within the anchor tag, again this won't work because the color has already been set with the * rule.

Set the color in a body selector as follows

body {
  color:white;
}

Delete the color rule from the * selector.

Add the anchor pseudo class rules

Then it should work

Edit below:

I'd avoid setting stuff like overflow, margin, padding, list-style and text-decoration in the * tag. The only thing you should be doing is setting box-sizing:border-box. It'll be a total nightmare to debug as your site grows as it'll cause unpredicatable results.