MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Selectors simples

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

En el nostre primer article de selectors aprendrem sobre els selectors "simples", així anomenat perquè coincideixen directament amb un o més elements d'un document, sobre la base del tipus d'element (o la seva classe o id).

Tipus selectors denominats selectors d'elements

Aquest selector és només una coincidència entre majúscules i minúscules entre el nom del selector i un nom d'element HTML donat. Aquesta és la forma més senzilla de dirigir-se a tots els elements d'un tipus donat. Anem a fer una ullada a un exemple:

Aquí hi ha alguns HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

Una fulla d'estil simple:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

I obtenim el següent:

Aprenentatge actiu: Selecció de diferents elements

Per a aquest aprenentatge actiu, ens agradaria que intentesiu canviar el selector de l'única regla CSS perquè els diferents elements en l'exemple tinguin estil. Sabeu com escriure un selector per aplicar el conjunt de regles a diversos elements alhora?

Si cometeu un error, sempre es pot restablir amb el botó de Reset. Si aconseguiu realment quedar encallats, feu clic al botó Show solution per veure una resposta potencial.

Selectors de classe

El selector de classe consisteix a inserir un punt '.', seguit d'un nom de classe. Un nom de classe és qualsevol valor sense posar espais dins d'un atribut HTML class. Depèn de nosaltres triar un nom per a la classe. També val la pena saber que diversos elements en un document poden tenir el mateix valor de la classe i un sol element pot tenir diversos noms de classes separades per espais en blanc. Aquí tenim un exemple ràpid:

Aquí tenim un HTML:

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

Una fulla d'estil simple:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

I obtenim aquest resultat:

Aprenentatge actiu: Maneig de múltiples classes

Per a aquest aprenentatge actiu, ens agradaria intentar canviar els atributs de classe en els elements de paràgraf de manera que es poguin aplicar múltiples efectes separats. Intentar aplicar una classe base-box, més una classe de rol (editor-note o warning), i opcionalment important si es vol donar a la caixa una gran importància. Penseu com aquest tipus de conjunt de regles ens permet construir un sistema modular d'estils..

Si cometeu un error, sempre es pot restablir amb el botó de Reset. Si aconseguiu realment quedar encallats, feu clic al botó Show solution per veure una resposta potencial.

Selectors ID

El selector ID consta d'un símbol de hash/lliura (#), seguit del nom del ID d'un element donat. Qualsevol element pot tenir un únic nom ID establert en un atribut id. Depèn de nosaltres el nom que escollim pel ID. És la forma més eficient per seleccionar un sol element.

Important: Un nom ID ha de ser únic en el document. El comportament respecte a ID's duplicats són impredictibles, per exemple, en alguns navegadors es compta només la primera instància, i la resta s'ignoren.

Vegem un exemple ràpid - he aquí un d'HTML:

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

Una fulla d'estil simple:

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

I obtenim aquest resultat:

Aprenentatge actiu: assignar colors del guanyador amb IDs

Per a aquest aprenentatge actiu, ens agradaria poder donar el guanyador, segon i tercer lloc en la competició un color apropiat or, plata i bronze, donant a les regles CSS 2-4 selectors apropiats que seleccionin els elements rellevants sobre la base del seu ID.

Si cometeu un error, sempre es pot restablir amb el botó de Reset. Si aconseguiu realment quedar encallats, feu clic al botó Show solution per veure una resposta potencial.

Selector universal

El selector universal (*) és el comodí final. Permet seleccionar tots els elements d'una pàgina. Com poques vegades és útil aplicar un estil a cada element d'una pàgina, s'utilitza sovint en combinació amb altres selectors (veure Combinadors a continuació).

Important: Amb compte en utilitzar el selector universal. Com s'aplica a tots els elements, el seu ús en grans pàgines web pot tenir un impacte perceptible en el rendiment: les pàgines web es poden mostrar més lentes del que s'esperava. No hi ha molts casos en què agradaria utilitzar aquest selector.

Ara, per exemple; primer un HTML:

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

I una fulla d'estil simple:

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Junts, donan el següent resultat:

En el següent article

Ben fet per arribar al final del nostre primer tutorial de selectors! Espero que hagiu trobat el vostre primer joc de selectors entretingut - ara hem vist els selectors bàsics simples que farem servir més comunament, anem a començar a buscar a algunes de les característiques més avançades, començant amb selectors d'Atribut.

 
 

Document Tags and Contributors

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