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> <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> <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> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <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> <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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/algorithms-misc/">Algoritmos-Misceláneos</a> </li><li> <a href="/python-numpy-arraycreation/">Creación De Matriz Numpy En Python</a> </li><li> <a href="/cpp-basics/">Conceptos Básicos De Cpp</a> </li><li> <a href="/math/">Matemáticas</a> </li><li> <a href="/python-set/">Conjunto De Python</a> </li><li> <a href="/java-timer-class/">Clase De Temporizador Java</a> </li><li> <a href="/java-priority-queue/">Cola-Prioritaria-Java</a> </li><li> <a href="/inorder-traversal/">Recorrido En Orden</a> </li><li> <a href="/java-date-class/">Clase De Fecha De Java</a> </li><li> <a href="/excel-functions/">Funciones De Excel</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">¿Es el ACT más fácil que el SAT?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> ¿Es más fácil el ACT o el SAT? Lea esta guía detallada para descubrir qué prueba es mejor para usted, según sus propias fortalezas y debilidades.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/is-act-easier-than-sat-131900"> <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="/what-is-cicada-3301">¿Qué es la cigarra 3301?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cuny-vs-suny-whats-difference-131198">CUNY vs SUNY: ¿Cuál es la diferencia?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-eval-function">Función de evaluación de JavaScript ()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/include-c">#incluir en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/one-liter-is-equal-how-many-glasses-water">Un litro equivale a cuantos vasos de agua</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="/difference-between-unix">unix vs ventanas</a>
</li><li><a href="/jvm-architecture">máquina virtual de Java</a>
</li><li><a href="/sunny-deol">sol soleado</a>
</li><li><a href="/masons-gain-formula">fórmula de albañil</a>
</li><li><a href="/conversion-from-nfa-dfa">nfa a dfa</a>
</li><li><a href="/method-overloading-java">sobrecarga de métodos</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="//nl.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>