Mémos CSS

Bienvenue dans la section Mémos CSS !
Vous trouverez ici des bouts de code de base sur le css et un tas d'archives de bouts de front tels que des boutons.

Sélecteurs

L'astérisque *

Il cible tous les éléments de la page. (il peut aussi être utilisé avec des sélecteurs d'enfants)


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div  * {
 border: 1px solid black;
}

il sollicite trop lourdement le navigateur donc on évite de l'utiliser

Sélecteur d'identifiant #X

Il cible le premier élément d'identifiant x qu'il rencontre.
Normalement, dans un code on ne doit pas trouver deux éléments ayant le même identifiant.


#mon_id {
    color: #fefefe;
}




<p id="mon_id"></p>

Sélecteur de classe .X

Il cible tous les éléments qui ont cette classe.


.text-blanc {
    color: #fefefe;
}




<p class="text-blanc"></p>

Sélecteur d'élément X

Il cible tous les éléments de cette catégorie.


span {
    color: blue;
}




<p> pas bleu </p>
<span> bleu </span>

Sélecteur descendant X Y

Sélectionne tous les éléments descendants d’un autre élément, peu importe leur niveau dans la hiérarchie.


div span {
    color: blue;
}




<div>
    <span> bleu </span>
    <p>
        <span> bleu </span>
    </p>
</div>

<span> pas bleu </span>

Sélecteur d'enfants direct X > Y

Sélectionne uniquement les enfants directs d'un élément.


div > span {
    color: blue;
}




<div>
    <span> bleu </span>
    <p>
        <span> pas bleu </span>
    </p>
     <span> bleu </span>
</div>

<span> pas bleu </span>

Sélecteur adjacent X + Y

Sélectionne que l'élément qui est immédiatement précédé par le premier élément ciblé. Autrement dit, c'est le premier Y qui suit un X qui va être impacté.


p + span {
    color: blue;
}




<span> pas bleu </span>

<p>
    <span> pas bleu </span>
</p>

<span> bleu </span>

Sélecteur adjacent X ~ Y

Sélectionne tous les éléments frères qui apparaissent après un élément donné


p ~ span {
  color: blue;
}




<span> pas bleu </pan>

<p>
    <span> pas bleu </pan>
</p>

<span> bleu </span>
<span> bleu </span>

<p> Paragraphe 2 </p>

<span> bleu </span>
<span> bleu </span>

Sélecteur par attributs []

Sélectionne tous les éléments qui ont l'attribut concerné.


button[type=submit] {
    border-radius: 20px;
}

div[data-categorie="maCatégorie"]{
    color: blue;
}




<form>
    <button type="submit"> Bordures arrondies </button>
</form>

<button> Bordures pas arrondies </button>



<div id="monId" class="maClasse" data-categorie="maCatégorie">
    je suis bleu
</div>

<div id="monId" class="maClasse">
    je suis pas bleu
</div>

Pour plus de plaisirs, on peut complexifier la contrainte sur les attributs :

X[foo] : l'élément X possède l'attribut foo.
X[foo="bar"] : l'élément X a l'attribut foo égal à "bar".
X[foo~="bar"] : l'attribut foo de X contient le mot "bar".
X[foo^="bar"] : l'attribut foo de X commence par "bar".
X[foo$="bar"] : l'attribut foo de X se termine par "bar".
X[foo*="bar"] : l'attribut foo de X contient la chaîne "bar".
X[foo|="bar"] : l'attribut foo de X commence par "bar" ou "bar-".

Pseudo-Classes

Les Pseudo-Classes représentent un état de l'élément, et sont appelées avec ":". Par exemple, :hover, :focus, :nth-child(), etc.

On va voir ici uniquement les principales pseudo-classes, il y en a d'autres, mais qu'on utilise plus rarement...

:root

Cible l'élément racine du document (généralement <html>). Utilisé pour y déclarer des variables


:root {
  --noir: #151515;
}

body{
  color: var(--noir)
}

:hover

Appliqué lorsqu'un utilisateur survole un élément avec la souris.


button:hover {
  background-color: lightblue;
}

:focus et :focus-within

:focus Sélectionne un élément a le focus (généralement après avoir cliqué sur un champ ou utilisé la touche "Tab").
:focus-within Cible un élément lorsqu'un de ses descendants a le focus.


input:focus {
  outline: 2px solid blue;
}

form:focus-within {
  border: 2px solid blue;
}

:active

Appliqué lorsqu'un élément est activé, par exemple au moment où un bouton est cliqué et maintenu.


a:active {
  color: red;
}

:link et :visited

:link est utilisée pour cibler tous les liens qui ne sont pas encore cliqués.
:visited est utilisée pour cibler tous les liens qui ont été cliqués.


a:link {
    color: red;
}

a:visted {
    color: purple;
}

:nth-child(n)

:nth-child(n) Cible l'enfant n d'un élément parent, où n peut être un nombre, odd (impair), even (pair), etc.
:first-child Cible le premier enfant d'un élément parent.
:last-child Cible le dernier enfant d'un élément parent.
:only-child Cible uniquement l'enfant unique d'un élément parent.


ol li:nth-child(2) {
  background-color: lightgray;
}

ul li:only-child {
  color: blue;
}




<ul>
    <li> bleu </li>
</ul>

<ul>
    <li> pas bleu </li>
    <li> pas bleu </li>
</ul>

:nth-of-type(n)

:nth-of-type(n) Cible le n-ème enfant de son type spécifique.
:first-of-type Cible le premier enfant d'un élément parent.
:last-of-type Cible le dernier enfant d'un élément parent.


p:nth-of-type(3) {
  color: blue;
}




<p> pas bleu </p>
<p> pas bleu </p>
<p> bleu </p>
<p> pas bleu </p>

:not(selector)

Cible tous les éléments qui ne correspondent pas au sélecteur fourni.


p:not(a:visited) {
  color: blue;
}

:has(selector)

Cible tous les éléments qui correspondent au sélecteur fourni.


p:has(span.maClasse) {
  color: blue;
}

Autres

On va dire qu'on a survolé les plus "importants" mais il y en a encore beaucoup d'autres... voici une liste en vrac d'autres pseudo-classes, mais il y en a encore d'autres !

:checked Cible les cases à cocher (<input type="checkbox">), boutons radio ou autres éléments qui sont cochés ou sélectionnés.
:placeholder-shown Cible les champs de formulaire qui affichent actuellement un placeholder.
:disabled Cible les éléments désactivés (comme des champs de formulaire).
:enabled Cible les éléments activés (le contraire de :disabled).
:required Cible les champs de formulaire qui ont l'attribut required.
:optional Cible les champs de formulaire qui ne sont pas obligatoires.
:empty Cible les éléments qui ne contiennent aucun enfant, y compris les espaces vides.

Pseudo-Elements

Les Pseudo-Elements représentent une partie d'un élément ou ajoutent du contenu, et utilisent désormais la notation "::". Par exemple, ::before, ::after, ::first-letter, etc.

On va voir ici uniquement les principaux pseudo-elements, il y en a d'autres, mais qu'on utilise plus rarement...

::before et ::after

::before Insère un contenu avant le contenu d'un élément spécifié. Utilisé pour ajouter des éléments décoratifs ou du texte.
::after Insère un contenu après le contenu d'un élément spécifié. Souvent utilisé avec ::before pour des effets symétriques.
Dans les deux cas, on est obligé d'y spécifier un content (même vide si besoin) sinon... le pseudo-élément ne sera jamais visible !
Si on ne s'en sert pas pour du texte, mais pour la décoration / animation, on va généralement mettre le pseudo-élément en position absolute et l'élément parent en position relative.
before et after ont un passe-droit, ils sont les seuls pseudo-éléments qui peuvent être appelés avec ":" et "::".


.maClasse{
    position: relative;
    width: 100px;
    height: 50px;
}

.maClasse::before{
    content: "Attention : ";
    font-weight: bold;
}

.maClasse:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.2);
}

::selection

Cible la partie d'un élément qui est sélectionné par l'utilisateur (par exemple, lors d'un surlignement avec la souris).


::selection {
  background-color: yellow;
  color: black;
}

::first-letter et ::first-line

::first-letter Cible la première lettre du premier bloc de texte dans un élément. Souvent utilisé pour des styles typographiques particuliers comme les lettrines.
::first-line Cible la première ligne d'un bloc de texte. Très utile pour appliquer des styles spécifiques à la première ligne seulement.


p::first-letter {
  font-size: 2em;
  color: red;
}

::placeholder

Cible le texte de l'attribut placeholder dans les champs de formulaire (<input>, <textarea>). Permet de styliser le texte indicatif.


input::placeholder {
  color: grey;
  font-style: italic;
}

::marker

Cible les puces des éléments de listes (ex: les petites boules de chaque li pour les ul).


li::marker {
  color: red;
}