En este artículo, discutiremos cómo el selector de CSS es importante mientras diseñamos la página web. El papel del selector de CSS en la página web receptiva es muy importante. Discutamos uno por uno.
Función del selector de niños: en el selector de niños, las propiedades de cualquier elemento son el padre inmediato de otro elemento.
Sintaxis:
if article > p
Define que el elemento de párrafo es un elemento secundario directo del artículo, luego se aplicarán las propiedades del selector de CSS.
html
<!DOCTYPE html>
<html>
<head>
<style>
/* In child selector any article
element whose immediate parent is
a section element. */
section > article {
color: green;
font-size: 16px;
}
/* In child selector any h2
element whose immediate parent
is a section element. */
section > h2 {
color: green;
}
</style>
</head>
<body>
<h1>Child Selector</h1>
<section>
<h2>Subheading 1</h2>
<!-- Applicable to Subheading 1
because h2 is direct child
of section here. -->
<div>
<article>
In this example, article is
not the direct child and
ARTICLE which is inside DIV,
which is inside SECTION. In
CSS properties of child,
selector will not apply in
this section.
</article>
</div>
</section>
<h2>Subheading 2</h2>
<section>
<article>
In this example ARTICLE as a
direct child of the SECTION
element. In CSS properties
of child, selector will directly
apply in this section.
</article>
<!-- Not applicable for Subheading 2,
because h2 is not direct child
of section here. -->
</section>
</body>
</html>
El resultado del código anterior verifica si las propiedades del selector CSS secundario son aplicables a los elementos de la sección.
Producción:
Función del selector de descendientes: las propiedades del selector de CSS del selector de descendientes se aplican a todos los niveles o elementos principales.
Sintaxis:
section li
Define que «li» es el elemento secundario, pero en cualquier nivel también considera que solo se aplicará el elemento «li» en el elemento de sección y las propiedades.
html
<!DOCTYPE html>
<html>
<head>
<style>
/* In this Descendant selector,
properties will be applicable to
all "li" elements that are inside
section element. */
section li {
color: green;
}
</style>
</head>
<body>
<h1>Descendant Selector</h1>
<section>
Table of contents:
<ul>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
</section>
<article>
Shopping List:
<ul>
<li>Cookies</li>
<li>Cake</li>
<li>Pie</li>
</ul>
</article>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Ashish_rana y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA