Sommaire
- Intro
- Attributes
- Logique & condition
- not, is, where…
Dans cette troisième partie, explorons l’idée de logique CSS et de condition.
Combinaisons Logiques
Liste de sélecteurs
Petit rappel CSS3, une liste de sélecteurs séparés par des virgules dont la déclaration sera identique pour tous. Ceci permet de condenser la feuille de style.
Exemple :
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
est équivalent à:
h1, h2, h3 { font-family: sans-serif }
( ) Descendant
Une liste de sélecteurs séparés par des espaces dont la déclaration sera pour le dernier élément.
Exemple :
h1 span.big { font-size : 8rem }Adjacent
h1 + span.big { font-size : 8rem }Pseudos-classes de Structure Arborescente
:root
Cette pseudo-classe représente un élément qui est la racine du document. Soit en HTML, l’élément <html>.
:empty
Le comportement que doit avoir un élément vide. La pseudo-classe :empty correspond à un élément qui n’a aucun enfant. Seuls les enfants et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec content n’ont pas d’influence sur le contenu de l’élément.
Par exemple, en HTML, pour éviter qu’un paragraphe vide prenne une place inutile alors qu’il est vide.
<p></p>en CSS :
p {margin-bottom:16px}
p:empty {display:none}note: Avec Selectors Level 4, le sélecteur :empty a été modifié afin de se comporter comme :-moz-only-whitespace mais, à l’heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité. Ceci permettrait de prendre un élément qui ne contient que des espaces (et donc visuellement vide), comme <p> </p>.
