Archives par mot-clé : sélecteur

Les sélecteurs d’attribut en css

[title~="enfant"] 
/*toutes les images dont les titres contiennent le mot "enfant" auront des bordures rouges*/{
 border: 5px solid red;
 padding:10px;
 margin:10px;
 }

[title~="vichy"] 
/*toutes les images dont les titres contiennent le mot "vichy" auront des bordures vertes*/{
 border: 5px solid green;
 padding:10px;
 margin:10px;
 }

[title$="02"]
/*toutes les images dont les titres finissent par "02" auront des coins arrondis*/{
 -moz-border-radius: 5px 5px 5px 5px;
 -webkit-border-radius: 5px 5px 5px 5px;
 padding: 5px;
 background: -moz-linear-gradient(center top, #999999 0%,#ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999999),color-stop(1, #ffffff));
 }

[alt^="p"]
/*toutes les images dont les textes alternatifs commencent par la lettre "p" auront auront un ombré*/{
 box-shadow: 8px 8px 0px #aaa;
 }
 [alt*="ro"]
/*toutes les images dont les textes alternatifs contiennent les lettres "ro" auront auront une opacité moindre*/{
 opacity: 0.5;
 }
pois marrons fond rose
alt:pois marrons fond rose title: Motif enfant 01
pois multicolore fond blanc
alt: pois multicolore fond blanc / title: Motif enfant 02
pois jaunes, bleus, rouges fond beige
alt: pois multicolore fond beige /title: Motif enfant 03
pois bleus fond blanc
alt: pois bleus fond blanc
title: Motif enfant 04
Carreaux roses
alt: Carreaux roses
title: Motif vichy 01
Carreaux jaunes
alt: Carreaux jaunes
title: Motif vichy 02
carreaux bleus
alt: Carreaux bleus
title: Motif vichy 03
Carreaux rouges
alt: Carreaux rouges
title:Motif vichy 04