MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selectors

This translation is incomplete. Please help translate this article from English.

Aquesta 5th secció del tutorial CSS Getting Started; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.

Informació: Selectors

CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:

strong {
  color: red;
}

En la terminologia de CSS, tota aquesta línia és una regla. Aquesta regla s'inicia amb strong, que és un selector (o una llista de selectors). Es selecciona quins elements del DOM s'aplica la regla.

Més detalls

La part dins de les claus és la declaració.

L'identificador color és una propietat, i el vermell és un valor.

El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.

En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de tipus.

Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.

A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.

Dos atributs tenen un estatus especial per CSS. Són class i id.

Selectors class

Utilitzeu l'atribut class en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.

En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.

Selectors ID

Utilitzeu l'atribut id en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.

En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.

Exemple
Aquesta etiqueta HTML té tant un atribut class com un atribut id:
<p class="key" id="principal">

El valor id, principal, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, key.

En un full d'estil CSS, aquesta regla fa que tots els elements amb la class key siguin verds. (Pot ser que no tots siguin elements <p>.)

.key {
  color: green;
}

Aquesta regla fa que l'únic element amb el id principal sigui negreta:

#principal {
  font-weight: bolder;
}

Selectors d'atributs

No està limitat als dos atributs especials, class i id. Podeu especificar altres atributs mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:

[disabled]
Selecciona tots els elements amb un atribut "disabled".
[type='button']
Selecciona els elements amb un tipus "button".
[class~=key]
Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a .key.
[lang|=es]
Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).
[title*="example" i]
Selecciona elements title els quals conté "example", ignorant majúscules i minúscules . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.
a[href^="https://"]
Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.
img[src$=".png"]
Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).

Selectors de pseudo-classes

Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple :hover aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.

Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador (:visited, per exemple), l'estat del seu contingut (com :checked en alguns elements de formulari), o la posició del ratolí (com :hover que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu especificació CSS3 Selectors working.

Sintaxi
selector:pseudo-class {
  property: value;
} 

Llista de pseudo-classes

Llista de selectors

Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.

Exemple
En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta.
.content-1, .content-2 {
  font-weight: bold;
}

Informació: Especificitat

Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més específic que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.

Més detalls

També es poden combinar selectors, fent un selector més específic. Per exemple, el selector .key selecciona tots els elements que tenen el nom de classe key. El selector p.key selecciona només elements <p> que tenen el nom de classe key.

Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.

Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.

Informació: Els selectors basats en relacions

CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.

Selectors comuns basats en les relacions
Selector Seleccions
A E Qualsevol element E que és un descendent d'un element A (que és: un fill, o un fill d'un fill, etc.)
A > E Qualsevol element E que és un fill (és a dir, descendent directe) d'un element A
E:first-child Qualsevol element E que és el primer fill del seu pare
B + E Qualsevol element E que és el següent germà d'un element B (és a dir: el següent fill del mateix pare)

Es poden combinar aquests per expressar relacions complexes.

També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".

Exemple

Una taula HTML té un atribut id, però les seves files i cel·les no tenen identificadors individuals:

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:

    #data-table-1 td:first-child {text-decoration: underline;}
    #data-table-1 td:first-child + td {text-decoration: line-through;}

Aquest és el resultat:

Prefix 0001 default
Més detalls

En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.

Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs class o id en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.

En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.

Per a més exemples sobre taules, consulteu Taules en la pàgina Referència CSS..

Acció: Ús dels selectors class i ID

  1. Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.
  2. A continuació, afegir els atributs id i class a la primera còpia, i un atribut id a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou:
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p id="first">
          <strong class="carrot">C</strong>ascading
          <strong class="spinach">S</strong>tyle
          <strong class="spinach">S</strong>heets
        </p>
        <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  3. Ara editeu el fitxer CSS. Substituir tot el contingut per:
    strong { color: red; }
    .carrot { color: orange; }
    .spinach { color: green; }
    #first { font-style: italic; }
    
  4. Guardeu els arxius i actualitzar el navegador per veure el resultat:
    Cascading Style Sheets
    Cascading Style Sheets

    Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.

    Els selectors class .carrot i .spinach tenen prioritat sobre el selector d'etiqueta strong.

    El selector ID #first té prioritat sobre els selectors class i tag.

Reptes
  1. Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau:
    Cascading Style Sheets
    Cascading Style Sheets
  2. Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau:
    Cascading Style Sheets
    Cascading Style Sheets
Possible solution
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below:
    #second { color: blue; }
    
    A more specific selector, p#second also works.
  2. Change the selector of the new rule to be a tag selector using p:
    p { color: blue; }
    
Hide solution
Veure la solució per el repte.

Acció: L'ús de selectors de pseudo-classes

  1. Creeu un arxiu HTML amb el següent contingut:
    <!doctype html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
      </body>
    </html>
    
  2. Ara editeu el fitxer CSS. Substituir tot el contingut per:
    a.homepage:link, a.homepage:visited {
      padding: 1px 10px 1px 10px;
      color: #fff;
      background: #555;
      border-radius: 3px;
      border: 1px outset rgba(50,50,50,.5);
      font-family: georgia, serif;
      font-size: 14px;
      font-style: italic;
      text-decoration: none;
    }
    
    a.homepage:hover, a.homepage:focus, a.homepage:active {
      background-color: #666;
    }
    
  3. Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte):
    Anem-nos  Home page  

Acció: L'ús de selectors basats en les relacions i pseudo-classes

Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear menús desplegables en CSS pur (això només és CSS, sense necessitat d'utilitzar JavaScript). L'essència d'aquesta tècnica és la creació d'una regla com la següent:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

per a ser aplicat a una estructura HTML com la següent:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.

I ara què?

La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més fàcil de llegir la CSS.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,