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.

Style

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 utilitzar un selector CSS per aplicar a tots els elements <div> la mateixa classe.

<!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>

Nota

El selector CSS només funcional si els elements no estan dins d’un context prose. 😾

En una activitat posterior ja aprendras com pots modificar el plugin Tailwind - Typography.

Regla

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

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

<head>
    <title>Selector</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 {
            h1 {
                @apply text-red-500 text-2xl
            }
        }
    </style>
</head>

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

</html>

I’m red!

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

h1 {
    @apply text-red-500 text-2xl
}

Dins de { } tens dos utility classes: text-red-500 i text-2xl.

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

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

<head>
    <title>Selector</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 {
            h1 {
                @apply text-red-500 text-2xl
            }
            p {
                @apply text-green-700
            }
        }
    </style>
</head>

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

</html>

I’m red!

I’m green :-)

It’s nice

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

h1 {
    @apply text-red-500 text-2xl
}
p {
    @apply text-green-700
}

Element

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

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

<head>
    <title>Selector</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 {
            h1 {
                @apply text-red-500 text-2xl
            }
            p {
                @apply text-green-700
            }
        }
    </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>

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 {
    @apply text-red-500 text-2xl
}
p, li {
    @apply text-green-700
}

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

Activitat

Afegeix una regla que selecciona els elements li i els sagna a la dreta:

Afegeix una regla que selecciona els elements p i aplica un marge a dalt i abaix:

El resultat ha de ser semblant a aquest:

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

Pots seleccionar elements a partir dels valors de l’atribut class.

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 selector és d’un valor de l’atribut classe, has de posar un punt a l’inici del selector.

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

.special {
    @apply text-orange-500 font-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.

h1 {
    @apply text-red-500 text-2xl
}
p, li {
    @apply text-green-700
}
p {
    @apply my-2
}
li {
    @apply ml-6 list-disc
}
.special {
    @apply text-orange-500 font-bold
}

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

<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>

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 {
    @apply text-orange-500 font-bold
}

Aquesta regla només s’aplica als elements <li> que tenen 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:

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

Pots seleccionar un element <em> en funció de la seva ubicació respecte a 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 {
    @apply text-purple-800
}

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 {
    @apply text-xl;
}

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

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ó

Style

La precària i habitual poesia

Regla

I’m red!

I’m red!

Element

I am a level one heading

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

Activitat

Dites i refranys

Embarbussaments i jocs de paraules

Miquel Martí i Pol

Informació de contacte

TODO