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

Introducció

TODO

Style

Els documents CSS es fan servir per estilitzar les pàgines web.

Nosaltres fem servir bootstrap.min.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>

El document CSS defineix un conjunt d'estils (color, mida, etc.) que s'apliquen de manera selectiva.

El selector CSS és la primer part d'una regla CSS.

Regla

En aquesta activitat, no utilitzem Boostrap

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

CSS

Script

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

Enlloc de modificar l'estil de l'element, també pots utilitza la fulla d'estil de Boostrap i afegir 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>
  <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.classList.add("text-center","fw-bold","text-danger")
    )
  </script>
</body>
</html>

Pots veure que s'ha modificat l'atribut class de totes les <p>s:

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

Arran de camí, de tornada,

L'escorça es fon amb el silenci.

Cap pregunta. Capvespre.

h4 { color: chocolate; font-size: 1em;}
h5 { color: crimson; font-size: 3em;}
h6 { color: blueviolet; font-size: .8em;}

2.-

Ingredients per a les faves a la catalana

El següent llistat d'ingredients està pensat per a dues racions o persones.

800 grams de faves fresques i tendres.
1 botifarra negra (sol rondar els 200 grams).
70 grams de cansalada.
2 cebes tendres o cebetes.

h1 {
  color: brown;
  font-size: 1.5em;
}

strong {
  color: peru;
}

.special {
  color: purple;
}

li {
  list-style-type: square;
}

TODO

Continua - Google Docs - CSS