En aquest document veurem com podem aplicar un estil a un element no basant-nos només en el nom de l'etiqueta, classe, id o posició dins l'arbre HTML, sinó fixant-nos en alguna característica del propi element.

El document es pot dividir en dues parts, la selecció d'elements utilitzant atributs i la selecció d'elements utilitzant pseudo-classes i pseudo-elements.

Selecció d'elements utilitzant atributs ( [ ] )

Es tracta de seleccionar l'element o conjunt d'elements segons si tenen un determinat atribut o el valor associat a aquest atribut.

Utilitzem el símbol [] per a indicar l'atribut al qual volem fer referència.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <main>
     <p lang="English">This text....</p> 
     <p>Aquest altre text ....</p>
    </main>
  </body>
</html>

Si volem que tots els paràgrafs que tinguin associat un determinat idiioma es vegin de color gris, utilitzarem la fòrmula

p[lang] {color:#777;}   /* Color gris */

Amb l'atribut selector podem utilitzar vàries estratègies:

  1. Seleccionar per la presència de l'atribut
  2. Seleccionar pel valor associat a un atribut determinat.
  3. En el cas d'atributs multivalor, seleccionar per la presència d'un determinat valor.

Aquest tipus de selector és molt útil quan es tracta de formularis, ja que n'és habitual l'ús d'atributs.

Exemple

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <form action="action.php" method="post"> 
            <label for="nom">Nom:<input id="nom" type="text" name="nom" /></label> 
            <label for="dni">DNI:<input id="dni" type="text" name="dni" /></label>
            <label for="password">Password:<input id="password" type="password" name="pass" /></label>
            <input type="submit" value="Enviar"/> <input type="reset" value="Netejar!" /> 
        </form>
  </body>
</html>

input[type="text"] {background-color: #777;}

Tots els camps d'entrada de tipus "text" es mostraran amb el color gris com a color de fons.

Pseudo-classes. Introducció

Una pseudo-classe s'utilitza per a definir l'estil sobre un element quan aquest està en un determinat estat. Amb pseudo-classes, podem canviar la visualització d'un element quan:

  • El ratolí està ubicat sobre l'element.
  • Definir l'estil d'un enllaç segons si ha estat o no visitat.
  • Definir l'estil d'un element quan reb el focus. Per exemple, si és un etiqueta de tipus input, canviar alguna propietat de visualització.

Sintaxis

Per a especificar una pseudo-classe cal afegir ":" (dos punts) després del selector. A nivell genèric seria:


selector:pseudo-class {
  propietat1: valors1;
  ....
}

Exemple

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <main>
      <!-- Here goes the main content of our web page -->
      <h1>Què és Lorem Ipsum?</h1>
      <p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
      <h1>Per què el fem servir?</h1>
      <p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
    </main>
  </body>
</html>

p {background-color: gray; font-size: 1em;} 
p:hover {background-color: yellow; font-size: 1.25em;}

En el codi anterior, la pseudo-classe és hover . Aquesta pseudo-classe fa que s'apliqui l'estil associat quan el mouse està ubicat sobre l'element. hover és una pseudo-classe que es pot aplicar a qualsevol element

  • visited: (link sobre el qual hem fet prèviament un click). Per exemple, els podem utilitzar amb aquells links que ens redireccionen a una secció del propi document.
  • hover: (quan el punter del mouse està damunt el link)
  • active: (quan estic clickant el link - es manté l'efecte si es deixa apretat)
  • link: (situació del link quan no es dóna cap de les situacions anteriors).

Exemple

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <main>
      <!-- Here goes the main content of our web page -->
      <h1>Què és Lorem Ipsum?</h1>
      <p>Lorem Ipsum és un text de farciment usat per la <a href="industria_tipografia.html">indústria de la tipografia</a> i la impremta. Lorem ....</p>
    </main>
  </body>
</html>

a:active {color: #F00;} 
a:hover {color: #700;}

Pseudo-classes en relació a la posició dels nodes

first-child

Selecciona el primer element fill. Així, per exemple, si en una plana web volem destacar el primer títol (h1) per sobre la resta de títols també h1 podem utilitzar la pseudo-class :first-child. Cal tenir en compte que la regla només s'aplicarà quan l'element al qual apliquem first-child sigui el primer fill de qualsevol altre element.

Exemple

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <main>
      <!-- Here goes the main content of our web page -->
        <h1>Què és Lorem Ipsum?</h1>
      <p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
      <h1>Per què el fem servir?</h1>
      <p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
    </main>
  </body>
</html>

  h1:first-child  { font-size: 2.5em; }

Només la primera etiqueta h1 serà redimensionada a la nova mida de la font, ja que és el primer fill, en aquest cas de main.

En el següent codi, utilitzant el mateix CSS, les dues etiquetes h1 es visualitzaran amb la font redimensionada. El motiu és que les dues etiquetes són fills

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <main>
      <!-- Here goes the main content of our web page -->
        <h1>Què és Lorem Ipsum?</h1>
      <p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
    </main>
    <aside>
      <h1>Per què el fem servir?</h1>  <!-- Hauria de ser h2 enlloc de h1. S'utilitza h1 a efectes d'aplicació de la pseudo-class first-child . Al validar el codi s'obtindria un Warning!! -->
      <p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
    </aside>
  </body>
</html>

  h1:first-child  { font-size: 2.5em; }

last-child

El funcionament de last-child és similar al de first-child però enlloc de fer referència al primer element fa referència l'últim fill d'una etiqueta contenidora.

Per exemple, si disposem del següent codi HTML i CSS,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>

    <ul>
        <li>1</li><li>2</li>
        <li>3
            <ul>
                <li>3.1</li>
            </ul>
        </li>
          <li>4</li>
    </ul>
 </body>
</html>

  li:last-child  { border:2px solid #0F0; }

Els items 3.1 i 4 es visualitzarien en un contorn verd. En la imatge es mostra una representació gràfica.

nth-child(n)

Permet seleccionar els elements que estan ubicats en una determinada posició respecte al seu element pare. Puc especificar un valor específic o generar valors variables utilitzant la fòrmula xn+d on x i d són dos valors constants i n és un comptador (0,1,2,3,...).

Puc utilitzar també les paraules even i odd per a identificar els elements imparells o parells. Veiem un exemple d'utilització.

Exemples

p:nth-child(3) coincideix amb el tercer paràgraf en relació a l'element pare. p:nth-child(2n+1) coincideix amb el paràgraf 1,3,5 ...

Puc utilitzar també les paraules even i odd per a identificar els elements imparells o parells. Veiem un exemple d'utilització.

nth-of-type(n)

La pseudo-class nth-of_type em permet seleccionar un fill segons la seva posició en relació al seu pare. Per exemple, si vull pintar el color de fons del primer paràgraf, utilitzant nth-child i el següent codi HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estils/main.css" />
<title>CSS</title>
</head>
<body>
  <main>
  <!-- Here goes the main content of our web page -->
    <h1>Què és Lorem Ipsum?</h1>
    <p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
    <h1>Per què el fem servir?</h1> <!-- Hauria de ser h2 enlloc de h1. S'utilitza h1 a efectes d'aplicació de la pseudo-class first-child . Al validar el codi s'obtindria un Warning!! -->
    <p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
    <h1>Què és Lorem Ipsum?</h1>
  </main>
</body>


p:nth-child(2) {background-color: #777;}

En aquest cas haig d'escollir el fill número 2, ja que és el segon fill de l'element main . Qualsevol canvi que es faci en l'estructura, per exemple, afegir un títol h2 després del h1, provocarà que la regla s'apliqui a un altre element, no al primer paràgraf.

La pseudo-class nth-of-type ens permet seleccionar els elements a partir del seu tipus. En el CSS anterior, s'hauria de canviar nth-child per nth-of-type i el 2 per un 1. Amb aquests canvis, podem assegurar que el primer fill de tipus p sempre serà seleccionat per a l'aplicació de la regla.


p:nth-of-type(1) {background-color: #777;}

Definició pseudo-elements

Puc utilitzar pseudo-elements per a assignar un estil a una part d'un element. Algun dels exemples típics en l'utilització de pseudo-elements és:

  • Formateix de la primera lletra d'un element
  • Inserir contingut abans o després d'un element. Cal tenir en compte que aquesta propietat no funciona amb tots els elements.

Sintaxis

Per a especificar un pseudo-element utilitzarem


selector::pseudo-element {
  propietat1: valors1;
  ....
}

L'especificació del pseudo-element es fa mitjançant els "::" (2 vegades 2 punts). L'utilització de només ":" també és vàlida, però es tracta d'una especificació associada a CSS1 i/o CSS2. L'aplicació de "::" és per a diferenciar els pseudo-elements de les pseudo-classes.

first-letter , first-line

Els selectors first-letter, first-line em seleccionen la primera lletra, o la primera línia dels elements als quals estan referenciats.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estils/main.css" />
<title>CSS</title>
</head>
<body>
  <main>
  <!-- Here goes the main content of our web page -->
    <h1>Què és Lorem Ipsum?</h1>
    <p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
    <h1>Per què el fem servir?</h1> <!-- Hauria de ser h2 enlloc de h1. S'utilitza h1 a efectes d'aplicació de la pseudo-class first-child . Al validar el codi s'obtindria un Warning!! -->
    <p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
    <h1>Què és Lorem Ipsum?</h1>
  </main>
</body>


h1::first-letter , p::first-letter {font-size: 2em; color:#00F;}

results matching ""

    No results matching ""