CSS - ALTRES SELECTORS, PSEUDOCLASSES i PSEUDOELEMENTS

Existeixen altres selectors a CSS2 tot i que encara no gaudeixen de prou suport ja que encara es fa servir el Internet Explorer 6. Això, segons com, ho podem utilitzar al nostre favor per discriminar entre navegadors a l'hora de fer hacks.

Selector fill[Selector descendent directe] [Per seleccionar elements que són descendents directes d'un altre.]

body>p{
declaracions
}

En aquest exemple està seleccionant tots els paràgrafs que tinguin com a element pare a body.

Selector per atribut [Pels elements que són descendents directes ]

1. p[align] {
   declaracions
   }
   En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align.
   
   
2. p[align=center] {
   declaracions
   }
   En aquest exemple està seleccionant aquells paràgrafs que tenen atribut align i com a valor center.
   
   
3. q[x~=y] {
   declaracions
   }
   Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per espais, una de les quals és la y.
   
4. p[x|=y] {
   declaracions
   }
   Coincideix quan el valor de l'atribut de l'element és una llista de paraules separades per guions, una de les quals és la y.

Selectors agrupats[Per seleccionar elements que són descendents directes d'un altre.]

h1, h2, h3{
declaracions comunes a tots 3 elements
}

En aquest exemple estem seleccionant 3 elements per definir aspectes comuns.

Selector germà adjacent[Per seleccionar elements que són descendents del mateix pare i que van seguits.]

h1 + h2{
declaracions
}

En aquest exemple estem seleccionant l'element h2 que estigui directament a continuació d'un h1. No pot haver coses entre mig d'aquests dos elements germans. Han d'anar un darrera l'altre.

PSEUDOCLASSES
Una pseudoclasse no fa referència a un element HTML en concret si no determinats estats especials d'aquest. La seva sintaxi és una mica especial ja que s'escriuen amb dos punts per separar-les de l'element al que ens referim. Veiem-ne com són els selectors de pseudoclasse:

:firstchild[Per seleccionar els elements descendents que siguin primer fill.]

• Exemple 1:
  div p:firstchild{
  declaracions
  }
  
  [En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de div].
  
  
• Exemple 2:
  div > p:firstchild{
  declaracions
  }
  
  [En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent directe de div].



• Exemple 3:
  p:firstchild{
  declaracions
  }
  [En aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].
  
  
• Exemple 4:
  * > p:firstchild{
  declaracions
  }
  
  [Una altra manera de fer en aquest exemple estem seleccionant l'element p sempre que sigui primer descendent de qualsevol altre element].

Pseudo classes per a enllaços i altres.
Serveixen per seleccionar diferents estats dels enllaços. Les pseudoclasses que fem servir als enllaços són les següents:

1. :link
2. :visited
3. :hover
4. :active
5. :focus

Aquestes pseudoclasses quan es declaren han de seguir necessàriament aquest ordre. Les dues primeres serveixen per definir els aspectes dels enllaços abans de ser visitats i després respecticament. Aquest estat dels enllaços depèn de l'historial del navegador. Les 2 següents en canvi depenen del cursor ja que apareixen quan passem per sobre o cliquem amb el ratolí. La darrera depèn de l'ús de la tecla TAB que va saltant d'enllaç a enllaç.

[Continuarà...]


PSEUDOELEMENTS
Els pseudo elements no són en si mateixos elements si no part d'elements
[Continuarà...]