28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
j'ai une question que signifie le :not()
dans l'exemple ci-dessous li a:hover:not(.active)

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li {
float: left;
}

li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #ddd;
}

li a.active {
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Merci à tous Smiley cligne
Modérateur
Bonjour,

Le :not( XXX ) permet de sélectionner un élément qui n'est pas XXX
https://www.w3schools.com/cssref/sel_not.asp

Donc si on décompose
li a:hover:not(.active)

On sélectionne une balise <a>, fille d'un balise <li>, qui est survolée (:hover) mais qui n'a pas la classe .active
En gros c'est le survol du lien mais pas si il est déjà actif.
Meilleure solution