Am I correct in my understanding of selectors?

Question

.top-menu {
  margin: 50px auto;
  padding: 0;
  list-style: none;
  width: 610px;
  height: 35px;
  box-shadow: 0 3px 4px #8b8b8b;
  background-color: #dadada;
}

.top-menu li {
  float: left;
  border-right: 1px solid #929292;
}

.top-menu li a:link {
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 35px;
  line-height: 35px;
}

.top-menu li a:visited {
  color: black;
}

ul li a:hover {
  background-color: #555;
  color: #fff;
}

<head>
  <meta charset="UTF-8">
  <title>pseudo selecotor</title>
</head>

<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
      <li><a href="#">menu6</a></li>
    </ul>
  </nav>
</body>

i run this page,

if hover on menu, text color is black.

but in css, hover's text color is white.

if i change hover's selector

from ul -> to .top-menu

text color is white.

Is this because I gave black as class selector and white as tag selector?

Is it because the class is applied after applying the tag?

score 1 · Accepted Answer · answered Jan 28 '22 at 04:01

1

It's because classes have higher specificity value than Elements and Pseudo Elements. In your case .top-menu have higher specificity than the element ul, therefore its style is followed/used. Refer to this table for specificity:

Am I correct in my understanding of selectors?

1 Answers1