Taula de continguts

Selector

Un selector ens ajuda a saber exactament per a quin element volem afegir un estil determinat.

Sortida CSS interna

Al diagrama anterior, estem aplicant el color verd per a tots etiquetes. Aquest tipus de selector s'anomena Element selector [també conegut com a tag o selector de tipus]. Si necessiteu estilitzar un element diferent, per exemple , només cal canviar el nom del selector en CSS.

Selectors CSS

Hi ha molts tipus de selectors. A continuació es mostren els tres selectors més utilitzats:

Nom del selector Descripció exemple
1. Selector d'elements Sota aquesta categoria, definim un estil comú per a una etiqueta html individual i reflecteix el mateix estil per a aquesta etiqueta, sigui on s'utilitzi. P {

  color: verd;

}

Això reflectirà el color verd per a totes les etiquetes p.

2. Selector d'identificació En aquesta categoria, donem ID a qualsevol etiqueta html, i per a aquest ID definim un estil. No es pot assignar el mateix ID a diverses etiquetes HTML; per tant, s'utilitza principalment en cas que es necessiti un estil únic per a un element HTML específic.

En CSS, el definim utilitzant el símbol hash (#).

CSS:
#my-id1 {

  color: verd;

}
HTML:

Això reflectirà el color verd per a qualsevol etiqueta HTML que tingui un ID igual a "my-id1".

3. Selector de classes Sota aquesta categoria, definim una classe per a qualsevol etiqueta html, i per a aquesta classe definim un estil. És el selector CSS més utilitzat perquè la mateixa classe es pot assignar a diverses etiquetes html, per tant es pot reutilitzar un estil CSS.

En CSS, el definim mitjançant un punt (.).

CSS:
.la meva classe {

  color: verd;

}
HTML:


Això reflectirà el color verd per a qualsevol etiqueta html que tingui classe igual a "la meva-classe1".

 

 

autor


Comentaris

Deixa un comentari

La seva adreça de correu electrònic no es publicarà. Els camps necessaris estan marcats *

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.