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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 class='hljs'>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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 class='hljs'>#div-container{ color: blue; background-color: gray; }></pre><p dir='ltr'> <b> <strong>Sortida:</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-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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-page-down-key">teclat pàgina avall</a>
</blockquote> <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>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><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-special-character">és un personatge especial</a>
</blockquote> <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 class='hljs'>* { 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 class='hljs'>#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 class='hljs'>[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 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>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 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>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></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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/technical-scripter-2018-cat/">Guionista Tècnic 2018</a> </li><li> <a href="/algebra/">Àlgebra</a> </li><li> <a href="/java-stringbuffer/">Java-Stringbuffer</a> </li><li> <a href="/anime/">Anime</a> </li><li> <a href="/mathematical/">Matemàtic</a> </li><li> <a href="/best/">El Millor</a> </li><li> <a href="/ejb-tutorial/">Tutorial Ejb</a> </li><li> <a href="/sql-functions/">Sql-Funcions</a> </li><li> <a href="/linux/">Linux</a> </li><li> <a href="/gta-5-cat/">Gta 5</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Classe entera gran</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java BigInteger amb exemples a abs(), add(), and (), andNot (), clearBit (), divide (), divideAndRemainder (), flipBit (), gcd (), max (), min (), mod (), modInverse (), modPow (), multiplicar (), nextProbablePrime (), not (), pow () etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/big-integer-class"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/calculator-program-c">Programa de calculadora en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tuples-c">Tuples en C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/html-attributes/">Html-Atributs</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-convert-string-enum-java">Com convertir una cadena a Enum a Java?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/count-numbers-from-given-range-having-exactly-5-distinct-factors">Comptar nombres d'un rang determinat que tenen exactament 5 factors diferents</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/java-swing-tutorial">swing java</a>
</li><li><a href="/rename-folder-linux">Linux canvia el nom del directori</a>
</li><li><a href="/add-elements-array-java">afegir a la matriu java</a>
</li><li><a href="/linux-file-system">què és un sistema de fitxers Linux</a>
</li><li><a href="/java-list">llista de mètodes 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 Tots Els Drets Reservats | <a href="//ca.techcodeview.com/">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>
</body>
</html>