Sabemos cómo aplicar estilos a los elementos secundarios si una clase principal tiene uno. Pero si queremos aplicar un estilo a la clase principal con CSS. Esta es la forma en que podemos hacer eso. Un combinador hijo describe un padre-hijo entre dos elementos. Un combinador hijo está hecho del carácter «mayor que (>)» y separa dos elementos.
Ejemplos:
- E > F, un elemento F hijo de un elemento E.
- El siguiente selector representa un elemento «p» que es hijo de «cuerpo»: cuerpo > p.
- Entonces, el estilo en la clase principal puede ser simplemente escribiendo el nombre una vez así
.parent li {
background:blue;
color:black;
}
- Si queremos aplicar el estilo en la clase secundaria, use esto
.parent > li > ul > li {
background:orange
}
Programa:
html
<!DOCTYPE html>
<html>
<head>
<style>
.parent li {
background:blue;
color:black;
}
.parent > li > ul > li {
background:orange
}
.parent > li > ul > li > ul >li {
background:pink;
}
</style>
</head>
<body>
<ul class="parent">
<li>I am first</li>
<li>I am second</li>
<li>I am third</li>
<li>I am forth</li>
<li>I am fifth
<ul class="child">
<li>child1</li>
<li>child2
<ul>
<li>child2.1</li>
<li>child2.2</li>
<li>child2.3</li>
</ul>
</li>
<li>child3</li>
<li>child4</li>
<li>child5</li>
</ul>
</li>
<li>I am sixth</li>
<li>I am seventh</li>
<li>I am eight</li>
</ul>
</body>
</html>
Producción:
CSS3 no tiene selectores de padres. Si se lanzó CSS4, entonces hay un selector de CSS4 propuesto, $ , que será como seleccionar el elemento li.
- Sin embargo, a partir de ahora, este código no se puede utilizar en ninguno de los navegadores.
ul $li ul.sub { ... }
- Mientras tanto, tendremos que usar JavaScript si necesitamos seleccionar un elemento principal.
$('ul li:has(ul.child)').addClass('has_child');
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 AnshuMishra3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA