C'est quoi ?

En CSS, il exite plusieur façon de cibler les objets a personaliser :

  • des classes ( ex : ”.maclasse” )
  • surcoucher les classe d'origine ( ex : “h1” )
  • des classe sur les ID (ex : ”#monID”).

Ceci est appelé un selecteur.

Combinaison

Les selecteurs acceptent certaines combinaisons pour affiner la selection, on peu ainsi utilser plusieurs sintaxes :

Sépararer les elements par une virgule

Par exemple :

css
h1, #plop {
   border: 1px solid #000
}

affichera une bordure de 1px sur tout les h1 et sur l'id “plop”

Sépararer les elements par un espace

Par exemple :

css
#plop a {
   border: 1px solid #000
}

affichera une bordure de 1px sur tout les liens contenu dans l'objet qui a “plop” en ID

Sépararer les elements par un point

FIXME Par exemple :

css
div.b1 {
   border: 1px solid #000
}
a.b1 {
   border: 1px solid #fff
}

affichera une bordure de 1px noir sur tous les div qui on la classe “b1” et affichera une bordure blanche sur tous les liens qui on la classe “b1”

Filtrer encore plus

si on fait

css
input {
   border: 1px solid #000
}

alors toutes les balises input se retrouve avec un border.
Mais ce qu'on voudrais c'est que les boutons de type submit aient un style et que les boutons normaux (de type button) en aient un autre et ceci, sans que les autres balises input soit modifiées.
Pour cela, ils faut filtrer et cela s'ecrit ainsi :

css
input[type=button] {
   border: 1px solid #fff
}
input[type=submit] {
   border: 1px solid #000
}

ainsi, les boutons 'submit' auront une bordure noire et les boutons de type button une bordure blanche.