CODEWITHSUNDEEP
wordpresscss
Jasmine
Jasmine

Reputation: 117

:not selector doesn't work

I have a problem with a menu in Wordpress and I've tried to write the code again on Codepen but I think I'm doing something wrong because it doesn't work neither there. Here is the problem:

    .nav-primary *:not(.sub-menu) a
{
  font-size: 20px;
}

If I use the :not selector my code doesn't work but if I delete it, it works with all the elements.

.nav-primary a {
color: white;
background-color: #3A3F4E;
border: 0;
}

.nav-primary li:nth-child(2)
{
	font-family: Oswald;
}

.nav-primary li:first-child
{
	font-family: Oswald;
	position: relative;
	top: -1px;
}

.nav-primary li:first-child:hover
{
	position: relative;
	top: -1px;
}

.nav-primary .sub-menu a {
color: white;
background-color: #3A3F4E;
}

.nav-primary a:hover {
color: white;
text-decoration: none;
background-color: #E56341;
}

.nav-primary > a
{
  font-size: 20px;
}
<div class="nav-primary">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  <div class="sub-menu">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
</div>

or you can check Here for codepen with the full code. Thanks for the help

Upvotes: 1

Views: 83

Answers (1)

itacode
itacode

Reputation: 3787

It doesn't work because the a tag you want to target is children of .nav-primary and does not have another parent without .sub-menu class.

It works as below:

.nav-primary a {
color: white;
background-color: #3A3F4E;
border: 0;
}

.nav-primary li:nth-child(2)
{
	font-family: Oswald;
}

.nav-primary li:first-child
{
	font-family: Oswald;
	position: relative;
	top: -1px;
}

.nav-primary li:first-child:hover
{
	position: relative;
	top: -1px;
}

.nav-primary .sub-menu a {
color: white;
background-color: #3A3F4E;
}

.nav-primary a:hover {
color: white;
text-decoration: none;
background-color: #E56341;
}

.nav-primary *:not(.sub-menu) a
{
  font-size: 20px;
}
<div class="nav-primary">
  <div class="dummy">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
  <div class="sub-menu">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
</div>

Upvotes: 1

Related Questions