En aquest tema, explorarem els selectors de CSS i el concepte d'especificitat, que són fonamentals per aplicar estils de manera efectiva i precisa als elements HTML. Aprendre a utilitzar correctament els selectors i comprendre com funciona l'especificitat t'ajudarà a evitar conflictes d'estil i a crear dissenys més coherents.

Els selectors de CSS s'utilitzen per seleccionar els elements HTML als quals vols aplicar estils. A continuació, es presenten alguns dels selectors més comuns:

1. Selector de tipus: Selecciona tots els elements d'un tipus específic.

   p {
     color: blue;
   }
   

   Aplica el color blau a tots els elements <p>.

2. Selector de classe: Selecciona elements amb una classe específica.

   .highlight {
     background-color: yellow;
   }
   

   Aplica un fons groc a tots els elements amb la classe highlight.

3. Selector d'identificador: Selecciona un element amb un identificador únic.

   #header {
     font-size: 24px;
   }
   

   Aplica una mida de font de 24px a l'element amb l'identificador header.

4. Selector d'atribut: Selecciona elements basats en un atribut o valor d'atribut.

   input[type="text"] {
     border: 1px solid black;
   }
   

   Aplica un contorn negre als elements <input> de tipus text.

5. Selector de descendents: Selecciona elements que són descendents d'un altre element.

   div p {
     margin: 10px;
   }
   

   Aplica un marge de 10px a tots els elements <p> que són descendents d'un <div>.

6. Selector de fills: Selecciona elements que són fills directes d'un altre element.

   ul > li {
     list-style-type: none;
   }
   

   Elimina els punts de llista dels elements <li> que són fills directes d'un <ul>.

7. Selector de germans adjacents: Selecciona un element que és immediatament després d'un altre element.

   h1 + p {
     margin-top: 0;
   }
   

   Elimina el marge superior del primer <p> que segueix immediatament un <h1>.

L'especificitat determina quins estils s'apliquen quan múltiples regles de CSS coincideixen amb el mateix element. Es calcula basant-se en el tipus de selectores utilitzats:

• Selectors d'identificador (#id) tenen la major especificitat.
• Selectors de classe (.class), atributs ([type="text"]) i pseudo-classes (:hover) tenen una especificitat mitjana.
• Selectors de tipus (div, p) i pseudo-elements (::before) tenen la menor especificitat.

Considera el següent codi CSS:

Si tens un element <p> amb la classe highlight i l'identificador unique, el color aplicat serà verd, ja que l'identificador té la major especificitat.

1. Exercici 1: Aplicar Estils amb Selectors

   • Crea un document HTML amb diversos elements <div>, <p>, i <span>.
   • Aplica estils diferents utilitzant selectors de tipus, classe i identificador.

2. Exercici 2: Experimentar amb l'Especificitat

   • Modifica el codi CSS per veure com canvia l'estil aplicat quan afegeixes o elimines classes i identificadors.

Exercici 1:

Exercici 2:

• Prova a afegir una classe important al paràgraf amb l'identificador unique i observa com l'estil no canvia perquè l'identificador té més especificitat.

Els selectors de CSS i l'especificitat són conceptes fonamentals per aplicar estils de manera efectiva. Comprendre com funcionen t'ajudarà a evitar conflictes d'estil i a crear dissenys més coherents i mantenibles. En el proper mòdul, explorarem com utilitzar les media queries per fer que els dissenys siguin responsius.