Selectors CSS
Els selectors CSS són la columna vertebral de qualsevol pàgina web elegant. S'orienten als elements HTML de les vostres pàgines, cosa que us permet afegir estils basats en el seu identificador, classe, tipus, atribut i molt més. Aquesta guia aprofundirà en les complexitats dels selectors CSS i el seu paper fonamental per millorar l'estètica i l'experiència d'usuari de les vostres pàgines web.
Tipus de selectors CSS
Els selectors CSS vénen de diversos tipus, cadascun amb la seva manera única de seleccionar elements HTML. Explorem-los:
| Selectors CSS | Descripció |
|---|---|
| Selectors simples | S'utilitza per seleccionar els elements HTML en funció del seu nom d'element, id, atributs, etc |
| Selector universal | Selecciona tots els elements de la pàgina. |
| Selector d'atributs | Orienta els elements en funció dels seus valors d'atributs. |
| Selector de pseudo-classe | Selecciona elements en funció del seu estat o posició, com ara :hover> per als efectes de flotació. |
| Selectors combinadors | Combina selectors per especificar relacions entre elements, com ara descendents ( > ) o nen ( >> ). |
| Selector de pseudo-element | Selecciona parts específiques d'un element, com ara ::before> o ::after> . |
Taula de contingut
- Tipus de selectors CSS
- Selectors simples
- Selector d'elements
- Selector d'identificació
- Selector de classes
- Selector universal
- Selector de grup
- Selector d'atributs
- Selector de pseudo-classe
- Selector de pseudo-element
Selectors simples
Els selectors simples conté les classes següents.
| Selector simple | Descripció |
|---|---|
| Selector d'elements | Selecciona elements HTML en funció dels noms d'etiquetes. |
| Selector d'identificació | Orienta un element HTML amb un atribut d'identificador específic. |
| Selector de classes | Selecciona elements amb un atribut de classe particular. |
Exemple: En aquest exemple, escriurem el codi per entendre millor els selectors i els seus usos.
HTML CSS Selectorstitle> <link rel='stylesheet' href='style.css' />cap> <body> <h1>Encapçalament de la mostrah1> <p>Aquest és el contingut del primer paràgrafp> <div id='div-container'>Aquest és un div amb id div-container div> <p>Aquest és un paràgraf amb classe paràgraf-classe p> cos> html> </pre> </code> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>Aplicarem regles CSS a l'exemple anterior. </span> </p> <h2 id='element-selector'> <b> <strong>Selector d'elements </strong> </b> </h2> <p dir='ltr'> <span>El </span> <span>selector d'elements </span> <span>selecciona elements HTML basats en el nom (o etiqueta) de l'element, per exemple p, h1, div, span, etc. </span> </p> <p dir='ltr'> <b> <strong>NOTA : </strong> </b> <span>El codi següent s'utilitza a l'exemple anterior. Podeu veure les regles CSS aplicades a tots </span> <span> </span> </p> <p> <span>etiquetes i </span> </p> <h1>etiquetes. <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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Element-Selectors-Exemple-sortida'> <p>Sortida del selector d'elements CSS </p> <h2 id='id-selector'> <b> <strong>Selector d'identificació </strong> </b> </h2> <p dir='ltr'> <span>El </span> <b> <strong>selector d'identificació </strong> </b> <span>utilitza el </span> <i> <em>atribut id </em> </i> <span>d'un element HTML per seleccionar un element específic. </span> <b> <strong> </strong> </b> <span>An </span> <b> <strong>id </strong> </b> <span>de l'element és únic en una pàgina per utilitzar-lo </span> <b> <strong>la id </strong> </b> <span>selector. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>El codi següent s'utilitza a l'exemple anterior mitjançant el selector d'identificació. </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>#div-container{ color: blue; background-color: gray; } </pre> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt='CSS-Id-selectors-exemple-sortida'> <p>Sortida d'exemple de selectors d'ID CSS </p> <h2 id='class-selector'> <b> <strong>Selector de classes </strong> </b> </h2> <p dir='ltr'> <span>El </span> <b> <strong>selector de classes </strong> </b> <span>selecciona elements HTML amb un atribut de classe específic. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>El codi següent s'utilitza a l'exemple anterior mitjançant el selector de classes. Per utilitzar un selector de classe, heu d'utilitzar ( . ) seguit del nom de classe en CSS. Aquesta regla s'aplicarà a l'element HTML amb l'atribut class </span> <i> <em>paràgraf-classe </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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt='CSS-Selectors de classes-Exemple-Sortida'> <p>Sortida d'exemple de selector de classes 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 s'utilitza per seleccionar tots els elements d'un document HTML. També inclou altres elements que es troben dins sota un altre element. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>El codi següent s'utilitza a l'exemple anterior amb el selector universal. Aquesta regla CSS s'aplicarà a tots i cadascun dels elements 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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt='CSS-Selector-Universal-Exemple-Sortida'> <p>Sortida d'exemple de selector universal CSS </p> <h2 id='group-selector'> <b> <strong>Selector de grup </strong> </b> </h2> <p dir='ltr'> <span>El </span> <b> <strong>Selector de grups </strong> </b> <span>s'utilitza per dissenyar tots els elements separats per comes amb el mateix estil. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>Suposem que voleu aplicar estils comuns a diferents selectors, en comptes d'escriure regles per separat, podeu escriure-les en grups com es mostra a continuació. </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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt='CSS-Selector-Grup-Exemple-Sortida'> <p>Sortida d'exemple de selector de grup CSS </p> <h2 id='attribute-selector'> <b> <strong>Selector d'atributs </strong> </b> </h2> <p dir='ltr'> <span>El </span> <b> <strong>selector d'atributs </strong> </b> <span>[atribut] s'utilitza per seleccionar els elements amb un atribut o valor d'atribut especificat. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>El codi següent s'utilitza a l'exemple anterior mitjançant el selector d'atributs. Aquesta regla CSS s'aplicarà a tots i cadascun dels elements 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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt='CSS-Atribut-Selectros-Exemple-Sortida'> <p>Sortida d'exemple de Selectros d'atributs CSS </p> <h2 id='pseudoclass-selector'> <b> <strong>Selector de pseudo-classe </strong> </b> </h2> <p dir='ltr'> <span>S'utilitza per dissenyar un tipus especial d'estat de qualsevol element. Per exemple, s'utilitza per dissenyar un element quan el cursor del ratolí passa per sobre. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>Utilitzem un sol dos punts(:) en el cas de a </span> <span>Selector de pseudo-classe </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Sintaxi: </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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Pseudo-selector-Exemple-Sortida'> <p>Sortida d'exemple de pseudoselector CSS </p> <h2 id='pseudoelement-selector'> <b> <strong>Selector de pseudo-element </strong> </b> </h2> <p dir='ltr'> <span>S'utilitza per dissenyar qualsevol part específica de l'element. Per exemple: s'utilitza per estilitzar la primera lletra o la primera línia de qualsevol element. </span> </p> <p dir='ltr'> <b> <strong>Nota: </strong> </b> <span>Utilitzem dos punts dobles (::) en el cas de a </span> <span>Selector de pseudo-element </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Sintaxi: </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>Sortida: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt='CSS-Pseudo-Element-Selector-Exemple-Sortida'> <p>Sortida d'exemple de selector de pseudo-element 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>
Comparteix </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Selectors CSS&url=https://www.techcodeview.com/ca/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/ca/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/ca/css-selectors&title=Selectors 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">
Potser T'Agradarà </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ca/how-get-into-ucla-131134" 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/25/how-get-into-ucla.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com entrar a UCLA: 4 consells clau" 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="/ca/how-get-into-ucla-131134">Com entrar a UCLA: 4 consells clau </a>
</h4>
</div> <div class="group">
<a href="/ca/bc-ad-bce-ce" 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/english-difference-between/70/bc-ad-bce-ce.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="BC i AD, BCE i CE: quina diferència hi ha?" 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="/ca/bc-ad-bce-ce">BC i AD, BCE i CE: quina diferència hi ha? </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>
Articles Més Populars </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="/ca/how-check-routing-table-linux-route-command">
<img src="https://techcodeview.com/img/linux-command/71/how-check-routing-table-linux-route-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com comprovar la taula d'encaminament a Linux | Comandament de ruta" 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="/ca/how-check-routing-table-linux-route-command" class="hover:text-tech-500 transition-colors line-clamp-3">Com comprovar la taula d'encaminament a Linux | Comandament de ruta </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="/ca/read-json-file-using-javascript">
<img src="https://techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Llegiu el fitxer JSON mitjançant JavaScript" 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="/ca/read-json-file-using-javascript" class="hover:text-tech-500 transition-colors line-clamp-3">Llegiu el fitxer JSON mitjançant JavaScript </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="/ca/difference-between-open-loop">
<img src="https://techcodeview.com/img/differences/79/difference-between-open-loop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre sistemes de control de llaç obert i llaç tancat" 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="/ca/difference-between-open-loop" class="hover:text-tech-500 transition-colors line-clamp-3">Diferència entre sistemes de control de llaç obert i llaç tancat </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="/ca/input-output-system-calls-c-create">
<img src="https://techcodeview.com/img/system-programming/82/input-output-system-calls-c-create.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Crides al sistema d'entrada-sortida en C | Crear, obrir, tancar, llegir, escriure" 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="/ca/input-output-system-calls-c-create" class="hover:text-tech-500 transition-colors line-clamp-3">Crides al sistema d'entrada-sortida en C | Crear, obrir, tancar, llegir, escriure </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="/ca/best-ib-math-analysis-approaches-study-guide-1311332">
<img src="https://techcodeview.com/img/blog/58/best-ib-math-analysis-approaches-study-guide.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les millors matemàtiques de l'IB: Guia d'estudi d'anàlisi i enfocaments i notes per a NM/NS" 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="/ca/best-ib-math-analysis-approaches-study-guide-1311332" class="hover:text-tech-500 transition-colors line-clamp-3">Les millors matemàtiques de l'IB: Guia d'estudi d'anàlisi i enfocaments i notes per a NM/NS </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="/ca/how-say-good-morning-french-correctly-131292">
<img src="https://techcodeview.com/img/blog/36/how-say-good-morning-french-correctly.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com dir el bon dia en francès correctament" 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="/ca/how-say-good-morning-french-correctly-131292" class="hover:text-tech-500 transition-colors line-clamp-3">Com dir el bon dia en francès correctament </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="/ca/introduction-splay-tree-data-structure">
<img src="https://techcodeview.com/img/picked/66/introduction-splay-tree-data-structure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducció a l'estructura de dades d'arbre de Splay" 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="/ca/introduction-splay-tree-data-structure" class="hover:text-tech-500 transition-colors line-clamp-3">Introducció a l'estructura de dades d'arbre de Splay </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="/ca/top-10-object-oriented-programming-languages-2024">
<img src="https://techcodeview.com/img/gblog-2024/51/top-10-object-oriented-programming-languages-2024.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Els 10 millors llenguatges de programació orientats a objectes el 2024" 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="/ca/top-10-object-oriented-programming-languages-2024" class="hover:text-tech-500 transition-colors line-clamp-3">Els 10 millors llenguatges de programació orientats a objectes el 2024 </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="/ca/lattices">
<img src="https://techcodeview.com/img/discrete-mathematics/76/lattices.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Reticles:" 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="/ca/lattices" class="hover:text-tech-500 transition-colors line-clamp-3">Reticles: </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="/ca/sql-left-outer-join-vs-left-join">
<img src="https://techcodeview.com/img/picked/13/sql-left-outer-join-vs-left-join.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Unió externa esquerra SQL vs unió esquerra" 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="/ca/sql-left-outer-join-vs-left-join" class="hover:text-tech-500 transition-colors line-clamp-3">Unió externa esquerra SQL vs unió esquerra </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">Categoria </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ca/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">
Bloc
</a> <a href="/ca/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ó De Java
</a> <a href="/ca/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àtiques
</a> <a href="/ca/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">
Col·leccions Java
</a> <a href="/ca/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">
Diferències
</a> <a href="/ca/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">Articles D'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/bash-tutorial/77/bash-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash Array" 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="/ca/bash-tutorial/">Bash Tutorial </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/bash-array">Bash Array </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/java-arrays/72/how-create-array-objects-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com crear una matriu d'objectes a 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="/ca/java-arrays/">Matrius Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/how-create-array-objects-java">Com crear una matriu d'objectes a Java? </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/54/what-are-college-prep-courses.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què són els cursos i classes de preparació universitària?" 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="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/what-are-college-prep-courses-131564">Què són els cursos i classes de preparació universitària? </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/99/python-virtual-environment-introduction.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Entorn virtual Python | Introducció" 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="/ca/it-problems-solutions/">Problemes Informàtics I Solucions </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/python-virtual-environment-introduction">Entorn virtual Python | Introducció </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-tutorial/82/check-installed-modules-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comproveu els mòduls instal·lats a 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="/ca/python-tutorial/">Tutorial Python </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/check-installed-modules-python">Comproveu els mòduls instal·lats a 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/sql-clauses-operators/10/sql-describe-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="SQL | Declaració DESCRIBE" 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="/ca/sql-clauses-operators/">Sql-Clàusules-Operadors </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/sql-describe-statement">SQL | Declaració DESCRIBE </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 Tots Els Drets Reservats |
<a href="//www.techcodeview.com/sl/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </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>