Archive de novembre, 2007

Les sélecteurs CSS, c’est pratique, mais…

22 novembre, 2007, Posté dans Développement web
3 Commentaires

Les sélecteurs CSS avancés simplifient (simplifieraient ?) la tâche de tout intégrateur. Ils permettent d’accéder à un élément ou à ses attributs sans lui spécifier de classe.

Des exemples pratiques :

Pour accéder seulement aux checkbox d’un formulaire :

  1. input[type=checkbox]{margin:30px 0 0 0;}

Pour iconiser des liens (permet un fond de lien différent en fonction de la cible du href) :

  1. a[href $='.pdf'] {
  2.  padding-left: 22px; background:url(img/pdf.gif) no-repeat left;}
  1. a[href $='.rar'] {
  2.  padding-left: 22px; background:url(img/archive.gif) no-repeat left;}
  1. a[href *="youtube.com/"] {
  2.  padding-left: 22px; background:url(img/youtube.gif) no-repeat left;}

Les sélecteur d’enfants (permet de cibler les enfants d’un élément) :

  1. #contenu > p{padding:0 0 0 20px;}

ou

  1. #contenu:first-child{padding:0 0 0 20px;}

qui permet de ne cibler que le premier enfant d’un élément.

Très pratique ! Et le “Mais” dans tout çà ? Eh bien il se nomme Internet Explorer 6 voyons ! Aucune de ces techniques n’aura les effets escomptés sur ce vieux navigateur.

Il existe une solution concernant le sélecteur d’enfant sur le JDN Développeurs.

Sinon l’ultime solution pour la totalité de ces techniques : Télécharger Firefox - Télécharger Opéra. Stop à l’utilisation d’IE 6 !