I selettori CSS sono la spina dorsale di qualsiasi pagina web elegante. Prendono di mira gli elementi HTML sulle tue pagine, permettendoti di aggiungere stili in base al loro ID, classe, tipo, attributo e altro. Questa guida approfondirà le complessità dei selettori CSS e il loro ruolo fondamentale nel migliorare l'estetica e l'esperienza utente delle tue pagine web.
Tipi di selettori CSS
I selettori CSS sono disponibili in vari tipi, ciascuno con il suo modo unico di selezionare gli elementi HTML. Esploriamoli:
| Selettori CSS | Descrizione |
|---|---|
Selettori semplici ospitare Linux | Viene utilizzato per selezionare gli elementi HTML in base al nome dell'elemento, ID, attributi, ecc |
| Selettore universale | Seleziona tutti gli elementi della pagina. |
| Selettore di attributi | Prende di mira gli elementi in base ai valori degli attributi. |
| Selettore di pseudo-classi | Seleziona gli elementi in base al loro stato o posizione, ad esempio:hover>per gli effetti al passaggio del mouse. |
| Selettori combinatori | Combina i selettori per specificare le relazioni tra elementi, come i discendenti (>) o bambino (>>). |
| Selettore di pseudo-elementi | Seleziona parti specifiche di un elemento, come ad esempio::before>O::after>. |
Tabella dei contenuti
- Tipi di selettori CSS
- Selettori semplici
- Selettore di elementi
- Selettore ID
- Selettore di classe
- Selettore universale
- Selettore di gruppo
- Selettore di attributi
- Selettore di pseudo-classi
- Selettore di pseudo-elementi
Selettori semplici
I selettori semplici contengono le classi seguenti.
| Selettore semplice | Descrizione |
|---|---|
| Selettore di elementi | Seleziona gli elementi HTML in base ai nomi dei tag. |
| Selettore ID | Ha come target un elemento HTML con un attributo id specifico. |
| Selettore di classe | Seleziona gli elementi con un particolare attributo di classe. |
Esempio: In questo esempio scriveremo il codice per comprendere meglio i selettori e il loro utilizzo.
HTML Selettori CSStitolo><link rel='stylesheet' href='style.css' />testa> <body> <h1>Intestazione di esempioh1><p>Questo è il contenuto del primo paragrafo><div id='div-container'>Questo è un div con ID div-container div><p>Questo è un paragrafo con classe paragrafo-classe p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Applicheremo le regole CSS all'esempio sopra.</span></p> <h2 id='element-selector'> <b> <strong>Selettore di elementi</strong> </b> </h2><p dir='ltr'><span>IL</span> <span>selettore di elementi</span> <span>seleziona gli elementi HTML in base al nome dell'elemento (o tag) ad esempio p, h1, div, span, ecc.</span></p> <p dir='ltr'> <b> <strong>NOTA :</strong> </b> <span>Il seguente codice viene utilizzato nell'esempio precedente. Puoi vedere le regole CSS applicate a tutti</span> <span></span></p><p> <span>tag e</span></p><h1>tag.<p></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-int">trasforma la stringa in int</a>
</blockquote> </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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="CSS-Element-Selectors-Example-output"><p>Uscita del selettore di elementi CSS</p> <h2 id='id-selector'> <b> <strong>Selettore ID</strong> </b> </h2><p dir='ltr'><span>IL</span> <b> <strong>selettore id</strong> </b> <span>utilizza il</span> <i> <em>attributo id</em> </i> <span>di un elemento HTML per selezionare un elemento specifico.</span> <b> <strong> </strong> </b> <span>UN</span> <b> <strong>id</strong> </b> <span>dell'elemento è univoco su una pagina da utilizzare</span> <b> <strong>l'id</strong> </b> <span>selettore.</span></p> <br><div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Il seguente codice viene utilizzato nell'esempio precedente utilizzando il selettore id.</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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt="Output di esempio-selettori-ID-CSS"><p>Output di esempio dei selettori ID CSS</p> <h2 id='class-selector'> <b> <strong>Selettore di classe</strong> </b> </h2><p dir='ltr'><span>IL</span> <b> <strong>selettore di classe</strong> </b> <span>seleziona gli elementi HTML con un attributo di classe specifico.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Il codice seguente viene utilizzato nell'esempio precedente utilizzando il selettore di classe. Per utilizzare un selettore di classe è necessario utilizzare ( . ) seguito dal nome della classe nei CSS. Questa regola verrà applicata all'elemento HTML con l'attributo class</span> <i> <em>classe-paragrafo</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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt="CSS-Class-Selectors-Example-Output"><p>Esempio di output del selettore di classe CSS</p> <h2 id='universal-selector'> <b> <strong>Selettore universale</strong> </b> </h2><p dir='ltr'><span>IL</span> <span>Selettore universale</span> <span>(*) nei CSS viene utilizzato per selezionare tutti gli elementi in un documento HTML. Include anche altri elementi che si trovano all'interno di un altro elemento.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Il codice seguente viene utilizzato nell'esempio precedente utilizzando il selettore universale. Questa regola CSS verrà applicata a ogni elemento HTML della pagina:</span></p> <h3> <b> <strong>CSS:</strong> </b> </h3><pre class='hljs'>* { color: white; background-color: black; }></pre><p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt="CSS-Universal-Selector-Example-Output"><p>Esempio di output del selettore universale CSS</p> <h2 id='group-selector'> <b> <strong>Selettore di gruppo</strong> </b> </h2><p dir='ltr'><span>IL</span> <b> <strong>Selettore di gruppo</strong> </b> <span>viene utilizzato per applicare lo stesso stile a tutti gli elementi separati da virgole.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Supponiamo di voler applicare stili comuni a diversi selettori, invece di scrivere le regole separatamente puoi scriverle in gruppi come mostrato di seguito.</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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt="Output di esempio del selettore di gruppo CSS"><p>Esempio di output del selettore di gruppo CSS</p> <h2 id='attribute-selector'> <b> <strong>Selettore di attributi</strong> </b> </h2><p dir='ltr'><span>IL</span> <b> <strong>selettore di attributi</strong> </b> <span>[attributo] viene utilizzato per selezionare gli elementi con un attributo o un valore di attributo specificato.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Il codice seguente viene utilizzato nell'esempio precedente utilizzando il selettore di attributi. Questa regola CSS verrà applicata a ogni elemento HTML della pagina:</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/freddie-mercury">È nata Freddie Mercury</a>
</blockquote> <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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt="CSS-Attribute-Selectros-Example-Output"><p>Output di esempio dei selettori di attributi CSS</p> <h2 id='pseudoclass-selector'> <b> <strong>Selettore di pseudo-classi</strong> </b> </h2><p dir='ltr'><span>Viene utilizzato per definire uno stile speciale di stato di qualsiasi elemento. Ad esempio: viene utilizzato per modellare un elemento quando il cursore del mouse passa sopra di esso.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Usiamo un singolo colon(:) nel caso di a</span> <span>Selettore di pseudo-classi</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintassi:</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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt="Output di esempio di pseudo-selettore CSS"><p>Output di esempio dello pseudo-selettore CSS</p> <h2 id='pseudoelement-selector'> <b> <strong>Selettore di pseudo-elementi</strong> </b> </h2><p dir='ltr'><span>Viene utilizzato per modellare qualsiasi parte specifica dell'elemento. Ad esempio: viene utilizzato per definire lo stile della prima lettera o della prima riga di qualsiasi elemento.</span></p> <p dir='ltr'> <b> <strong>Nota:</strong> </b> <span>Usiamo i due punti doppi(::) nel caso di a</span> <span>Selettore di pseudo-elementi</span> <span>.</span></p> <p dir='ltr'> <b> <strong>Sintassi:</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>Produzione:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt="CSS-Pseudo-Element-Selector-Example-Output"><p>Output di esempio del selettore di pseudo-elemento CSS</p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-trim">rivestimento delle corde Java</a>
</blockquote> <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="//changelesschoir.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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/socket-programming/">Programmazione Dei Socket</a> </li><li> <a href="/uml/">Uml</a> </li><li> <a href="/business/">Attività Commerciale</a> </li><li> <a href="/greedy/">Avido</a> </li><li> <a href="/hibernate-tutorial/">Tutorial Sull'ibernazione</a> </li><li> <a href="/c-operators/">Operatori C</a> </li><li> <a href="/system-programming/">Programmazione Del Sistema</a> </li><li> <a href="/csharp-dictionary-class/">Classe Dizionario Csharp</a> </li><li> <a href="/sql-clauses/">Clausole Sql</a> </li><li> <a href="/math/">Matematica</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Come entrare alla New York University: 4 suggerimenti chiave per creare un'ottima applicazione</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Quanto è difficile entrare alla New York University? Scopri i requisiti di ammissione alla New York University e ottieni consigli dagli esperti su come entrare alla New York University.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-get-into-nyu-4-key-tips-build-great-application-1311168"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sql-cast-function">Funzione CAST SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/relational-algebra">Algebra relazionale</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/php-functions">Funzioni PHP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/introduction-java-servlets">Introduzione ai servlet Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mysql-limit">Limite MySQL</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">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/javascript-print-method">stampa javascript</a>
</li><li><a href="/c-boolean">booleano in c</a>
</li><li><a href="/java-convert-int-char">java int in carattere</a>
</li><li><a href="/java-queue-interface">coda di priorità Java</a>
</li><li><a href="/bubble-sort-java">ordinamento delle bolle Java</a>
</li><li><a href="/java-convert-int-string">convertire int in stringa</a>
</li><li><a href="/java-string-join">unione di stringhe 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 Tutti I Diritti Riservati | <a href="//techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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: #213141;
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: #555;
}
`,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>