Selectores CSS
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> <h1>etiquetas. <p> </p> </h1> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>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> <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>#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>.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> <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>* { 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>#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>[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>Selector:Pseudo-Class { Property: Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>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>Selector:Pseudo-Element{ Property:Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>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>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Compartir </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Selectores CSS&url=https://www.techcodeview.com/es/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/es/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/es/css-selectors&title=Selectores CSS"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Te Puede Gustar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/es/best-living-environment-regents-review-guide-2023-1311406" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/68/best-living-environment-regents-review-guide-2023.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="La guía de revisión de Regents del mejor entorno de vida 2023" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/best-living-environment-regents-review-guide-2023-1311406">La guía de revisión de Regents del mejor entorno de vida 2023 </a>
</h4>
</div> <div class="group">
<a href="/es/reverse-string-java" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/basic-coding-problems/65/reverse-string-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Invertir una cadena en Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/reverse-string-java">Invertir una cadena en Java </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Artículos Más Populares </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/gimp-heal-tool">
<img src="https://techcodeview.com/img/gimp-tutorial/48/gimp-heal-tool.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Herramienta de curación GIMP" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/gimp-heal-tool" class="hover:text-tech-500 transition-colors line-clamp-3">Herramienta de curación GIMP </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/what-is-serial-port">
<img src="https://techcodeview.com/img/computer/60/what-is-serial-port.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es un puerto serie?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/what-is-serial-port" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es un puerto serie? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/explained-what-is-discord-24282">
<img src="https://techcodeview.com/img/get-informed/92/explained-what-is-discord.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Explicado: ¿Qué es Discord?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/explained-what-is-discord-24282" class="hover:text-tech-500 transition-colors line-clamp-3">Explicado: ¿Qué es Discord? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/c-functions">
<img src="https://techcodeview.com/img/it-problems-solutions/11/c-functions.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Funciones C" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/c-functions" class="hover:text-tech-500 transition-colors line-clamp-3">Funciones C </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/mysql-show-columns">
<img src="https://techcodeview.com/img/mysql-tutorial/54/mysql-show-columns.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL Mostrar columnas" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/mysql-show-columns" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL Mostrar columnas </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/serialization-deserialization-java-with-example">
<img src="https://techcodeview.com/img/it-problems-solutions/24/serialization-deserialization-java-with-example.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Serialización y deserialización en Java con ejemplo" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/serialization-deserialization-java-with-example" class="hover:text-tech-500 transition-colors line-clamp-3">Serialización y deserialización en Java con ejemplo </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/javascript-removeattribute-method">
<img src="https://techcodeview.com/img/javascript-tutorial/13/javascript-removeattribute-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Método JavaScript removeAttribute()" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/javascript-removeattribute-method" class="hover:text-tech-500 transition-colors line-clamp-3">Método JavaScript removeAttribute() </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-go-full-screen-windows-11">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/01/how-go-full-screen-windows-11.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo pasar a pantalla completa en Windows 11?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-go-full-screen-windows-11" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cómo pasar a pantalla completa en Windows 11? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/what-is-prospective-student-131128">
<img src="https://techcodeview.com/img/blog/41/what-is-prospective-student.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es un futuro estudiante?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/what-is-prospective-student-131128" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es un futuro estudiante? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/what-is-punch-card-system">
<img src="https://techcodeview.com/img/computer/22/what-is-punch-card-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es el sistema de tarjeta perforada?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/what-is-punch-card-system" class="hover:text-tech-500 transition-colors line-clamp-3">¿Qué es el sistema de tarjeta perforada? </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoría </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/es/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/es/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversión De Java
</a> <a href="/es/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matemáticas
</a> <a href="/es/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Colecciones Java
</a> <a href="/es/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferencias
</a> <a href="/es/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Cadena De Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Artículos De Interés </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/it-problems-solutions/69/introduction-object-oriented-programming.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducción a la programación orientada a objetos" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/it-problems-solutions/">Problemas Y Soluciones De Ti </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/introduction-object-oriented-programming">Introducción a la programación orientada a objetos </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/it-problems-solutions/40/25-basic-linux-commands.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="25 comandos básicos de Linux para principiantes" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/it-problems-solutions/">Problemas Y Soluciones De Ti </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/25-basic-linux-commands">25 comandos básicos de Linux para principiantes </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/get-advice/22/parents-guide-minecraft.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Una guía para padres sobre Minecraft" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/get-advice/">Obtenga Asesoramiento </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/parents-guide-minecraft-24236">Una guía para padres sobre Minecraft </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/python/18/how-find-length-list-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo encontrar la longitud de una lista en Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/python/">Pitón </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-find-length-list-python">Cómo encontrar la longitud de una lista en Python </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/63/20-most-useful-rhetorical-devices.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Los 20 recursos retóricos más útiles" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/20-most-useful-rhetorical-devices-131444">Los 20 recursos retóricos más útiles </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/misc/70/java-io-linenumberinputstream-class-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clase Java.io.LineNumberInputStream en Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/misc/">Varios </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/java-io-linenumberinputstream-class-in-java">Clase Java.io.LineNumberInputStream en Java </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Todos Los Derechos Reservados |
<a href="//www.techcodeview.com/no/">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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>