Un selector ens permet seleccionar de manera declarativa un subconjunt d'elements de la nostra pàgina

Introducció

Quan un navegador carrega un document HTML, converteix aquest document en un mòdel d’objectes: DOM (Document Object Module).

Un DOM representa el document en memòria com un arbre de nodes, o arbre DOM, on cada node representa un part del document.

Els selectors són expressions que, igual que fas amb una base de dades, et permet crear una consulta que et tornarà un conjunt de nodes que compleixen els criteris del selector.

Layer

Per aplicar les mateixes classes a tots els elements div de la llista, has de repetir les mateixes classes per cada element div:

<!DOCTYPE html>
<html lang="ca">

<head>
    <title>La precària i habitual poesia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
</head>

<body class="prose">
    <h1 class="text-2xl font-bold m-4">La precària i habitual poesia</h1>
    <div class="ms-4 font-semibold text-lg text-gray-500">La poesia té una cosa empipadora</div>
    <div class="ms-4 font-semibold text-lg text-gray-500">és la rima, la musiqueta,</div>
    <div class="ms-4 font-semibold text-lg text-gray-500">la música externa,</div>
    <div class="ms-4 font-semibold text-lg text-gray-500">la persistent, pesada musiqueta.</div>
</body>

</html>

La precària i habitual poesia

La poesia té una cosa empipadora

és la rima, la musiqueta,

la música externa,

la persistent, pesada musiqueta.

Si vols, en lloc de repetir les mateixes classes per cada element div, pots utilizar un selector CSS per aplicar a tots els elements div la mateixes classes:

<!DOCTYPE html>
<html lang="ca">

<head>
    <title>La precària i habitual poesia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <style type="text/tailwindcss">
        @layer base {
             div {
                @apply ms-4 font-semibold text-lg text-gray-500;
            }
        }
    </style>
</head>

<body>
    <h1 class="text-2xl font-bold m-4">La precària i habitual poesia</h1>
    <div>La poesia té una cosa empipadora</div>
    <div>és la rima, la musiqueta,</div>
    <div>la música externa,</div>
    <div>la persistent, pesada musiqueta.</div>
</body>

</html>

La directiva @apply et permet utilitzar classes de Tailwind en la definició de selectors CSS.

La directiva @layer pot ser base, components o utilities. Pel que fa al navegador, si utilitzes @layer, els selectors es defineixen com a part de la capa que declaris, independentment d’on estiguin ubicades realment les definicions dins dels teus fitxers CSS.

Fer servir @layer components defineix el selector com a part dels components i abans de les utilities. Això vol dir que, si combinem una definició nostra amb una utilitat de Tailwind, guanyarà la utilitat, que és el que volem. Així, podem definir, per exemple, un títol extra gran amb:

@layer components {
    .title { @apply text-6xl font-bold }
    .subtitle { @apply text-4xl font-semibold }
    .subsubtitle { @apply text-lg font-medium italic }
}

<div class="title text-5xl">Title</div>

Per entendre per què @layer és important, cal conèixer un principi general del CSS: a igualtat de condicions, si dues classes CSS intenten ajustar la mateixa propietat subjacent, preval la que està definida més tard. (Si ja estàs familiaritzat amb el CSS, saps que també hi ha el principi d’especificitat, on guanya la definició més específica, però com que totes les utilitats de Tailwind tenen la mateixa especificitat, això no és un problema aquí.)

En un fitxer CSS, si tens dues definicions per al mateix selector que defineixen la mateixa propietat, guanya el selector definit més tard al fitxer. En Tailwind, si tens dues classes utilitàries que defineixen la mateixa propietat, guanya la que apareix més endavant a la llista; per tant, class="text-xl text-2xl" donarà un text amb mida 2xl.

En definir un selector personalitzat dins d’una capa, el selector es carrega al final d’aquella capa i abans de la següent. Això té conseqüències sobre com el teu CSS personalitzat pot interactuar amb altres utilities de Tailwind o amb altres CSS. Per exemple, podem fer que les nostres definicions formin part de l’HTML utilitzant @apply sobre etiquetes, no sobre selectors de classe. En aquest cas, posem la definició a la capa base:

@layer base {
    h1 { @apply text-4xl font-bold }
    h2 { @apply text-2xl font-semibold }
    h3 { @apply text-lg font-medium italic }
}

Aquí redefinim directament els elements h1, h2 i h3, de manera que podem fer servir això:

<h1>Title</h1>

En estar a la capa base, aquestes definicions van abans de totes les utilities, de manera que <h1 class="text-6xl"> es comporta com esperes, amb la 6xl tenint prioritat. Si l’h1 estigués definit a la capa utilities, llavors l’h1 tindria prioritat perquè es definiria més tard que text-6xl. I com que hem mogut la definició a la capa base, Tailwind ho considerarà part dels estils Preflight i ho definirà abans de qualsevol component. De nou, aquesta ubicació et permet barrejar etiquetes, components i utilities tal com s’espera.

By being in the base layer, these definitions are before all utilities, so that <h1 class="text-6xl"> behaves as you’d want, with the 6xl taking precedence. If the h1 was defined in the utilities layer, then the h1 would have precedence because it’d be defined later than the text-6xl. And because we’ve moved the layer to base, Tailwind will consider this part of the Preflight styles and define it before any components. Again, this placement allows you to mix tags, components, and utilities as expected.

Style

En aquesta activitat, no utilitzem Boostrap

Cada node del document HTML és un objecte que té propietats.

Una d’elles és style que al seu torn també tè propietats, com pot ser color, etc.

A continuació tens un document on modifiquem les propietats color i margin de la propietat style del node <p>:

<!doctype html>
<html>
<head>
  <title>CSS</title>
</head>
<body>
  <p style="color:blue; margin-left: 10em;">No diguis blat fins que no el tinguis al sac i ben lligat:</p>
</body>
</html>

El resultat és aquest:

No diguis blat fins que no el tinguis al sac i ben lligat:

Emmet

Quan escrius HTML amb l’editor VS Code pots descriure un part de l’estructura d’un document, i aquest es completarà de manera automàtica tal com s’explica en aquest document: Emmet in Visual Studio Code.

emmet.gif

Quan comences a escriure una abreviatura d’Emmet, pots veure l’abreviatura a la llista de suggeriments.

En aquest document està explicat totes les ajudes que ofereix emmet : Cheat Sheet.

Amb l’ajuda d’emmet estilitza aquest document:

Arran de camí, de tornada,

L’escorça es fon amb el silenci.

Cap pregunta. Capvespre.

<!doctype html>
<html>
<head>
  <title>Style</title>
</head>
<body style="border: 3px solid blue; padding: 1em;">
  <p style="color: chocolate; font-size: 1em;">Arran de camí, de tornada, </p>
  <p style="color: crimson; font-size: 2em; margin-top: 1em;">L'escorça es fon amb el silenci.</p>
  <p style="color:darkmagenta ; font-size: .8em; margin-left: 5em;">Cap pregunta. Capvespre.</p>
</body>

</html>

Regla

Enlloc de modificar les propietats dels nodes un a un, puc utilitzar un selector per seleccionar un conjunt de nodes a la vegada i modificar-ho tot al mateix temps.

Les regles CSS utitlitzen selectors.

A continuació tens una document HTML modificat amb una regla CSS:

I’m red!

Un regla CSS es pot declarar dins de l’element <head> d’un document amb el bloc <style>:

<!doctype html>
<html>
<head>
  <title>Selector</title>
  <meta charset="utf-8">

  <style>
    h1 {
      color: red;
      font-size: 2em;
    }
  </style>

</head>
<body>
  <h1>I'm red!</h1>
</body>
</html>

La regla comença amb un selector, que selecciona tots els elements <h1>:

h1 {
    color: red;
    font-size: 2em;
}

Dins de { } tenim dos declaracions: una per a la propietat color i l’altre per a la propietat font-size (en unitats em).

Pots declarar tantes regles com vulguis dins d’un bloc <style>:

<!doctype html>
<html>
<head>
  <title>Selector</title>
  <meta charset="utf-8">

  <style>
    h1 {
      color: red;
      font-size: 2em;
    }

    p {
      color: seagreen;
    }
  </style>

</head>
<body>
  <h1>I'm red!</h1>
  <p>I'm seagreen :-)</p>
  <p>It's nice</p>
</body>
</html>

En aquest cas tenim dos regles: una pels elements <h1>, una altra pels elements <p>:

I’m red!

I’m seagreen :-)

It’s nice

Element

A continuació veurem diferents exemples de regles a partir d’aquest document HTML:

<!doctype html>
<html>
<head>
    <title>Selector</title>
    <style>

    </style>
</head>
<body>
    <h1>I am a level one heading</h1>
    <p>This is a paragraph of text. In the text is a <span>span element</span> 
    and also a <a href="https://google.com">link</a>.</p>
    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
    <ul>
        <li>Item <span>one</span></li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>
</body>
</html>

Afegeix le regles del document anterior:

h1 {
    color: red;
    font-size: 2em;
}

 p {
    color: seagreen;
}

Amb aquestes regles el document es veu així:

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

Pots fer servir diversos selectors al mateix temps separant-los amb una coma:

h1 { color: red; font-size: 2em; }

p, li {
    color: seagreen;
}

Pots veure que el selector s’aplica a tots els elements p i li:

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

Classe

També pots seleccionar elements a partir dels valors de l’atribut class.

És el sistema que utilitza Bootstrap per estilitzar els documents.

Modifica el segon element de la llista, afegint una atribut class:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

Per indicar que el selectpr és d’un valor de l’atribut classe, has de posar un punt al inici del selector.

Afegeix aquesta regla al final de l’element <style>:

.special {
  color: orange;
  font-weight: bold;
}

Pots veure que aquesta regla només s’aplica al segon element de la llista:

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

Les regles s’apliquen de dalt a baix (en cascada), i una regla que s’aplica després sobreescriu una que s’ha aplicat abans.

Pots aplicar la classe special a qualsevol element del document que vulguis que tingui el mateix aspecte que el segon element de la llista:

<!doctype html>
<html>
<head>
    <title>Selector</title>

    <style>
      h1 { color: red; font-size: 2em; }
      p, li { color: seagreen;}
      .special {  color: orange; font-weight: bold;}
    </style>

</head>
<body>
    <h1>I am a level one heading</h1>
    <p>This is a paragraph of text. In the text is a <span class="special">span element</span> 
    and also a <a href="https://google.com">link</a>.</p>
    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
    <ul>
        <li>Item <span>one</span></li>
        <li class="special">Item two</li>
        <li>Item <em>three</em></li>
    </ul>
</body>
</html>

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

Si vols ser més precís, pots seleccionar per element i classe a la vegada:

li.special {
  color: orange;
  font-weight: bold;
}

Aquesta regla només s’aplica als elements <li> que tenen la un valor de classe special:

<li class="special">

Per tant, aquesta regla CSS ja no s’aplica a l’element <span> encara que tingui l’atribut class amb el valor special perquè no és un element <li>:

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

Ubicació

Un document HTML s’estructuren en forma d’arbre invertit:

flowchart TD
html
html —> head
html —> body
body —> h1
body —> p1[“p”]
body —> p2[“p”]
body —> p3[“p”]
p3 —> em1[“em”]
body —> ul
ul —> li1[“li”]
ul —> li2[“li”]
ul —> li3[“li”]
li3 —> em2[“em”]

En el nostre document hi ha dos elements <em>.

Si vols pots selecciona un element <em> en funció de la seva ubicació respectecte un altre element-

Per exemple, aquesta regla només s’aplica a aquells elements <em> que són descendents d’un element <li>:

li em {
  color: rebeccapurple;
}

Pots veure que ara el <em> del tercer element <li> és de color porpra, però el que hi ha dins de la <p> no s’ha modificat:

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

També pots seleccionar un element que està a continuació de l’altre:

Per exemple, aquesta regla selecciona totes les <p>s que estan a continuació d’un <h1>:

h1 + p {
  font-size: 150%;
}

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

Item one
Item two
Item three

StyleSheet

Enlloc de tenir un bloc <style> dins el document HTML, el pots tenir en un document apart.

Aquest document té extensió css i el poden utlitzar molts documents web a la vegada.

Per exemple, nosaltres fem servir bootstrap.min.css que està en aquesta URL: https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.css

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"> 
  </head>
  <body>
  </body>
</html>

Pots veure que en el <head> crees un <link> de tipus stylesheet a la url https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css.

El navegador, al carregar el document web, segueix l’enllaç i processa la fulla d’estil.

Crea una fulla d’estil pròpia style.css:

body { margin: 3em;}
p { color: red;}

Crea un document HTML amb un enllaç relatiu a la teva fulla d’estil:

Script

El DOM és una de les APIs més utilitzades perquè pertme al codi que s’executa dins el navegador interactuar amb tots el nodes del document.

El selectors també es fan servir quan programem Javascript per seleccionar elements del DOM als quals aplicarem alguna acció.

Afegeix un bloc <script> al final del <body>:

<!doctype html>
<html>
<head>
  <title>Script</title>
</head>
<body>
  <p>El poble és un vell tossut,</p>
  <p>és una noia que no té promès,</p>
  <p>és un petit comerciant en descrèdit,</p>
  <p>és un parent amb qui vam renyir fa molt de temps.</p>
  <script>
    document.querySelector("p").style.color = "red"
 </script>
</body>
</html>

El mètode document.querySelector("p") et torna el primer node que fa “match” amb el selector.

En el nostre exemple, modifiques el style.color de l’element <p>:

El poble és un vell tossut,

és una noia que no té promès,

és un petit comerciant en descrèdit,

és un parent amb qui vam renyir fa molt de temps.

Si vols seleccionar tots els elements, utilitza el mètode querySelectorAll():

<!doctype html>
<html>
<head>
  <title>Script</title>
</head>
<body>
  <p>El poble és un vell tossut,</p>
  <p>és una noia que no té promès,</p>
  <p>és un petit comerciant en descrèdit,</p>
  <p>és un parent amb qui vam renyir fa molt de temps.</p>
  <script>
    document.querySelectorAll("p").forEach(e => e.style.color = "red")
  </script>
</body>
</html>

Amb un foreach pots modificar la propietat style.color de tots els elements:

El poble és un vell tossut,

és una noia que no té promès,

és un petit comerciant en descrèdit,

és un parent amb qui vam renyir fa molt de temps.

Bootstrap

Molts cops has d’afegir les mateixes classes a un conjunt d’elements.

Amb javascript pots seleccionar els elements i aplicar les classes corresponents.

<!doctype html>
<html>
<head>
  <title>Script</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 style="color: chocolate;" class="fw-bold text-center fs-3 mt-5">El Poble</h1>
  <div class="border border-3 m-3 p-1">
    <p>El poble és un vell tossut,</p>
    <p>és una noia que no té promès,</p>
    <p>és un petit comerciant en descrèdit,</p>
    <p>és un parent amb qui vam renyir fa molt de temps.</p>
  </div>
  <script>
    document.querySelectorAll("p").forEach(
      e => e.classList.add("text-center", "fw-bold")
    )
  </script>
</body>
</html>

En aquest exemple, utilitzem Javascript per afegir les classes text-center i fw-bold a totes les <p>s:

El Poble

El poble és un vell tossut,

és una noia que no té promès,

és un petit comerciant en descrèdit,

és un parent amb qui vam renyir fa molt de temps.

Activitat

1.- Setze jutges

Dites i refranys

Embarbussaments i jocs de paraules

Els nostres jutges es mengen el fetge del penjat, que es menjaria el fetge dels jutges en el cas de ser despenjat.

Setze jutges d’un jutjat mengen fetges d’un penjat.

Setze jutges d’un jutjat mengen fetge d’un heretge; setze jutges d’un jutjat mengen fetge d’un penjat que encara penja.

<h1>Dites i refranys</h1>
<h3>Embarbussaments i jocs de paraules</h2>

<p>Els nostres jutges es mengen el fetge del penjat, que es menjaria el fetge dels jutges en el cas de ser despenjat.</p>
<p>Setze jutges d'un jutjat mengen fetges d'un penjat.</p>
<p>Setze jutges d'un jutjat mengen fetge d'un heretge; setze jutges d'un jutjat mengen fetge d'un penjat que encara penja.</p>

h1 {
   font-size: 2em;
   color: beige;
   background-color: blueviolet;
   padding: 2em;
}

h3 {
   color: orangered;
   margin-top: 4em;
   margin-left: 1em;
}

h2+p {
   color: brown;
   background-color: antiquewhite;
   font-size: 1.5em;
   margin-top: 3em;
   margin-left: 1em;
}

p {
   color: darkslateblue;
   background-color: aqua;
   padding: 1em;
   margin-left: 4em;
}

2.- Miquel Martí i Pol

Miquel Martí i Pol

Poeta

Vaig cursar estudis primaris a l’escola parroquial del meu poble. A catorze anys vaig començar a treballar al despatx d’una fàbrica de filatura de cotó. Hi vaig treballar prop de trenta anys, fins que el 1973 una esclerosi múltiple em va obligar a deixar la feina i em va convertir en un pensionista de gran invalidesa. Abans, als dinou anys, havia patit una greu tuberculosi pulmonar. Casat dues vegades, tinc dos fills del primer matrimoni.

Informació de contacte

Correu: miquel@gmail.com
Web: https://miquelmartiipol.cat
Telefon: 93 850 03 55

h1 {
   color: #375e97;
   font-size: 2em;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   border-bottom: 1px solid #375e97;
}

h3 {
   color: #375e97;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

p {
   margin: 1em;
   color: darkgray;
   font-weight: bold;
}

p.ocupacio {
   color: oldlace;
   background-color: chocolate;
   font-weight: bold;
   font-size: 1.5em;
   padding: .5em;
}

li {
   color: azure;
   background-color: deepskyblue;
   font-weight: bolder;
   list-style-type: none;
   margin: .3em 3em;
   padding: .3em
}

a {
   margin-left: 2em;
}

TODO

Google docs

Document - Selector

Introducció

Layer

La precària i habitual poesia

Style

Emmet

Regla

I’m red!

I’m red!

Element

I am a level one heading

I am a level one heading

Classe

I am a level one heading

I am a level one heading

I am a level one heading

Ubicació

I am a level one heading

I am a level one heading

StyleSheet

Script

Bootstrap

El Poble

Activitat

Dites i refranys

Embarbussaments i jocs de paraules

Miquel Martí i Pol

Informació de contacte

TODO