Al diseñar y desarrollar aplicaciones web, a veces necesitamos seleccionar todos los elementos secundarios de un elemento excepto el último elemento. Para seleccionar todos los elementos secundarios de un elemento, excepto el último elemento secundario, utilice las pseudoclases :not y :last-child .
Sintaxis:
element:not(:last-child) {
// CSS Style
}
Ejemplo 1: este ejemplo crea un menú de navegación separado por el borde derecho excepto el último elemento.
<!DOCTYPE html>
<html>
<head>
<title>
Example to select all children
except the last
</title>
<!-- CSS style to create nav bar -->
<style>
nav {
margin: 30px;
}
nav a {
text-transform: capitalize;
text-decoration: none;
color: rgba(60, 60, 60);
font-family: sans-serif;
padding: 10px 10px;
margin-top: 30px;
width: 150px;
text-align: center;
display: inline-block;
}
nav a:not(:last-child) {
border-right: 5px solid greenyellow;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Geeksforgeeks</a>
<a href="#">Articles</a>
<a href="#">Contact Me</a>
</nav>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea un menú de navegación y usa alguna propiedad CSS excepto el último elemento.
<!DOCTYPE html>
<html>
<head>
<title>
Example to select all children
except the last
</title>
<!-- CSS style to create nav bar -->
<style>
nav {
margin: 30px;
}
nav a {
text-transform: capitalize;
text-decoration: none;
color: rgba(60, 60, 60);
font-family: sans-serif;
padding: 10px 10px;
margin-top: 30px;
width: 150px;
text-align: center;
display: inline-block;
border: 2px solid black;
border-radius: 5px;
}
nav a:not(:last-child) {
background-color:greenyellow;
}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Geeksforgeeks</a>
<a href="#">Articles</a>
<a href="#">Contact Me</a>
</nav>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rossoskull y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA