Los selectores CSS son la columna vertebral de cualquier página web elegante. Se dirigen a elementos HTML en sus páginas, lo que le permite agregar estilos según su identificación, clase, tipo, atributo y más. Esta guía profundizará en las complejidades de los selectores de CSS y su papel fundamental para mejorar la estética y la experiencia del usuario de sus páginas web.
Tipos de selectores CSS
Los selectores CSS vienen en varios tipos, cada uno con su forma única de seleccionar elementos HTML. Exploremoslos:
| Selectores CSS | Descripción |
|---|---|
Selectores simples | Se utiliza para seleccionar los elementos HTML en función de su nombre de elemento, identificación, atributos, etc. |
| selector universal | Selecciona todos los elementos de la página. |
| Selector de atributos | Apunta a elementos en función de los valores de sus atributos. |
| Selector de pseudoclase | Selecciona elementos según su estado o posición, como:hover>para efectos de desplazamiento. |
| Selectores combinadores | Combine selectores para especificar relaciones entre elementos, como descendientes (>) o niño (>>). |
| Selector de pseudoelementos | Selecciona partes específicas de un elemento, como::before>o::after>. |
Tabla de contenidos
- Tipos de selectores CSS
- Selectores simples
- Selector de elementos
- Selector de identificación
- Selector de clases
- selector universal
- Selector de grupo
- Selector de atributos
- Selector de pseudoclase
- Selector de pseudoelementos
Selectores simples
Los selectores simples contienen las siguientes clases.
| Selector sencillo | Descripción |
|---|---|
| Selector de elementos | Selecciona elementos HTML según sus nombres de etiquetas. |
| Selector de identificación | Apunta a un elemento HTML con un atributo de identificación específico. |
| Selector de clases | Selecciona elementos con un atributo de clase particular. |
Ejemplo: En este ejemplo, escribiremos el código para comprender mejor los selectores y sus usos.
HTML Selectores CSStítulo><link rel='stylesheet' href='style.css' />cabeza> <body> <h1>Encabezado de muestrah1><p>Este es el contenido dentro del primer párrafop><div id='div-container'>Este es un div con id div-container div><p>Este es un párrafo con clase párrafo-clase p>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Aplicaremos reglas CSS al ejemplo anterior.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='element-selector'> <b> <strong>Selector de elementos</strong> </b> </h2><p dir='ltr'><span>El</span> <span>selector de elementos</span> <span>selecciona elementos HTML según el nombre del elemento (o etiqueta), por ejemplo p, h1, div, span, etc.</span></p> <p dir='ltr'> <b> <strong>NOTA :</strong> </b> <span>El siguiente código se utiliza en el ejemplo anterior. Puedes ver las reglas CSS aplicadas a todos</span> <span></span></p><p> <span>etiquetas y</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-convert-string-json-object-java">cadena java a json</a>
</blockquote><h1>etiquetas.<p></p> </h1><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Ejemplo-salida"><p>Salida del selector de elementos CSS</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h2 id='id-selector'> <b> <strong>Selector de identificación</strong> </b> </h2><p dir='ltr'><span>El</span> <b> <strong>selector de identificación</strong> </b> <span>utiliza el</span> <i> <em>atributo de identificación</em> </i> <span>de un elemento HTML para seleccionar un elemento específico.</span> <b> <strong> </strong> </b> <span>Un</span> <b> <strong>identificación</strong> </b> <span>del elemento es único en una página para usar</span> <b> <strong>La identificación</strong> </b> <span>selector.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>El siguiente código se utiliza en el ejemplo anterior utilizando el selector de identificación.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container{ color: blue; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="CSS-Id-selectores-ejemplo-salida"><p>Salida de ejemplo de selectores de ID de CSS</p> <h2 id='class-selector'> <b> <strong>Selector de clases</strong> </b> </h2><p dir='ltr'><span>El</span> <b> <strong>selector de clase</strong> </b> <span>selecciona elementos HTML con un atributo de clase específico.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>El siguiente código se utiliza en el ejemplo anterior utilizando el selector de clases. Para usar un selector de clases, debe usar (.) seguido del nombre de la clase en CSS. Esta regla se aplicará al elemento HTML con el atributo de clase.</span> <i> <em>clase de párrafo</em> </i> <span></span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>.paragraph-class { color:white; font-family: monospace; background-color: purple; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Selectores-de-clase-Ejemplo-Salida"><p>Salida de ejemplo del selector de clases CSS</p> <h2 id='universal-selector'> <b> <strong>selector universal</strong> </b> </h2><p dir='ltr'><span>El</span> <span>Selector universal</span> <span>(*) en CSS se utiliza para seleccionar todos los elementos de un documento HTML. También incluye otros elementos que se encuentran dentro de otro elemento.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-int">convertir una cadena a un número entero</a>
</blockquote> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>El siguiente código se utiliza en el ejemplo anterior utilizando el selector universal. Esta regla CSS se aplicará a todos y cada uno de los elementos HTML de la página:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Selector-universal-ejemplo-salida"><p>Salida de ejemplo del selector universal CSS</p> <h2 id='group-selector'> <b> <strong>Selector de grupo</strong> </b> </h2><p dir='ltr'><span>El</span> <b> <strong>selector de grupo</strong> </b> <span>se utiliza para diseñar todos los elementos separados por comas con el mismo estilo.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Suponga que desea aplicar estilos comunes a diferentes selectores; en lugar de escribir reglas por separado, puede escribirlas en grupos como se muestra a continuación.</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="CSS-Grupo-Selector-Ejemplo-Salida"><p>Salida de ejemplo del selector de grupo CSS</p> <h2 id='attribute-selector'> <b> <strong>Selector de atributos</strong> </b> </h2><p dir='ltr'><span>El</span> <b> <strong>selector de atributos</strong> </b> <span>[atributo] se utiliza para seleccionar los elementos con un atributo o valor de atributo específico.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>El siguiente código se utiliza en el ejemplo anterior utilizando el selector de atributos. Esta regla CSS se aplicará a todos y cada uno de los elementos HTML de la página:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Atributo-Selectros-Ejemplo-Salida"><p>Salida de ejemplo de selectores de atributos CSS</p> <h2 id='pseudoclass-selector'> <b> <strong>Selector de pseudoclase</strong> </b> </h2><p dir='ltr'><span>Se utiliza para diseñar un tipo especial de estado de cualquier elemento. Por ejemplo, se utiliza para diseñar un elemento cuando el cursor del mouse se sitúa sobre él.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Usamos un solo colon (:) en el caso de un</span> <span>Selector de pseudoclase</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Class { Property: Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>h1:hover{ background-color: aqua; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Pseudo-Selector-Ejemplo-Salida"><p>Salida de ejemplo de pseudoselector CSS</p> <h2 id='pseudoelement-selector'> <b> <strong>Selector de pseudoelementos</strong> </b> </h2><p dir='ltr'><span>Se utiliza para diseñar cualquier parte específica del elemento. Por ejemplo: se utiliza para diseñar la primera letra o la primera línea de cualquier elemento.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Usamos dos puntos dobles (::) en el caso de un</span> <span>Selector de pseudoelementos</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p> <pre class='hljs'>Selector:Pseudo-Element{ Property:Value; }></pre><h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>p::first-line{ background-color: goldenrod; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-pseudo-elemento-selector-ejemplo-salida"><p>Salida de ejemplo de selector de pseudoelementos CSS</p> <p dir='ltr'> <br></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/computer/">Computadora</a> </li><li> <a href="/technical-scripter-2018-cat/">Guionista Técnico 2018</a> </li><li> <a href="/opencv/">Opencv</a> </li><li> <a href="/information-security/">Seguridad De Información</a> </li><li> <a href="/javascript-date/">Fecha-Javascript</a> </li><li> <a href="/adobe-illustrator/">Ilustrador Adobe</a> </li><li> <a href="/python-list/">Lista De Python</a> </li><li> <a href="/linux-unix-tools/">Herramientas Linux Unix</a> </li><li> <a href="/ejs-templating-language/">Lenguaje De Plantillas Ejs</a> </li><li> <a href="/gmail-questions/">Preguntas Sobre Gmail</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Cmdlets básicos de PowerShell</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Lista de cmdlets de PowerShell con qué es PowerShell, historial de PowerShell, características de PowerShell, PowerShell vs CMD, secuencias de comandos de PowerShell, versiones de PowerShell, comandos de PowerShell, bucles de PowerShell, condiciones de PowerShell, matriz de PowerShell, corchetes de PowerShell, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/basic-cmdlets-powershell"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/a2-b2-formula">Fórmula a2 – b2</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/stanford-acceptance-letter-1311248">Carta de aceptación de Stanford: real y oficial</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-difference-between-an-image">¿Cuál es la diferencia entre una imagen, una fotografía y una imagen?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/add-key-value-pair-dictionary-python">Agregue un par clave:valor al diccionario en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/search-algorithms-artificial-intelligence">Algoritmos de búsqueda en inteligencia artificial</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-replaceall">reemplaza todo</a>
</li><li><a href="/what-is-listening-port">puerto de escucha</a>
</li><li><a href="/method-java">métodos en java</a>
</li><li><a href="/neena-gupta">Neena Gupta</a>
</li><li><a href="/java-instanceof">instancia de en java</a>
</li><li><a href="/merge-sort-algorithm">fusionar ordenación java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>