A menudo nos encontramos con una situación en el desarrollo web front-end en la que tenemos una serie de elementos en HTML y necesitamos dar un estilo específico solo al último elemento o a cada elemento excepto el último elemento o básicamente a ese elemento que no se puede seleccionar. directamente. Llega el uso de pseudoselectores.
Este artículo explica el selector :not(:last-child):after . Este selector no selecciona el elemento después del último elemento secundario. Se usa principalmente para agregar el contenido después de cada elemento secundario, excepto el último.
Ejemplo 1: este ejemplo crea un elemento div simple. No usa :not(:last-child):después del selector.
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
outline: 1px solid;
margin: 10px;
box-shadow: 0 0 5px black;
background: green;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.inner-div {
width: 90%;
height: 45%;
background: white;
margin: 0 auto;
padding-left: 2px;
}
</style>
</head>
<body>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Después de aplicar el pseudoselector :not(:last-child):after al ejemplo anterior.
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
outline: 1px solid;
margin: 10px;
box-shadow: 0 0 5px black;
background: green;
font-family: 'Segoe UI', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.inner-div {
width: 90%;
height: 45%;
background: white;
margin: 0 auto;
padding-left: 2px;
}
.div .inner-div:not(:last-child):after {
content: 'not in the bottom div';
}
</style>
</head>
<body>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
</body>
</html>
Producción:
Explicación:
- .div .inner-div: Selecciona todos los elementos con clase ‘inner-div’ dentro de elementos con clase ‘div’. Aquí, los tres divs tienen clase ‘div’ con dos divs secundarios con clase ‘inner-div’. Selecciona los seis elementos div con el nombre de clase ‘inner-div’.
- :no(:último hijo)
- El selector :not() excluye de la selección el elemento que se le pasa.
- El selector :last-child selecciona el último hijo.
- La combinación de estos dos selectores anteriores excluye a los últimos elementos secundarios (div interno) de cada div principal de la selección.
- :después Este es un gran selector para agregar contenido (o, a veces, incluso elementos a nivel de bloque) después de los elementos seleccionados (Aquí el primer div interno en cada conjunto de divs internos). Por lo tanto, el contenido ‘no en el div inferior’ solo se agrega en el div superior y no en el div inferior.
Ejemplo 3:
html
<!DOCTYPE html>
<html>
<head>
<style>
li:not(:last-child):after {
content: ' || ';
color:green;
font-weight:bold;
}
li {
display: inline;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>CSS :not(:last-child):after Selector</h3>
<div>GeeksforGeeks Subjects</div>
<ul>
<li>Data Structure</li>
<li>Algorithm</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por arpancodes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA