Pseudo-élément et attributs CSS

de | 3 novembre 2011

Attributs CSS

Un presque moment de détente aujourd’hui avec quelques révisions sur les CSS avec le pseudo-élément first-letter et les attributs !

On a parfois un peu trop l’habitude d’utiliser à tord et à travers des images et outils personnels pour s’assurer qu’une page Internet sera compatible avec tous les navigateurs Internet du marché. Mais d’après les derniers chiffres des parts de marché des navigateurs, il semblerait bien qu’on puisse de plus en plus s’appuyer sur les standards du W3C.

Une petite révision s’impose donc avec l’utilisation de pseudo-éléments et d’attributs CSS.

Tout d’abord le first-letter qui permet, comme son nom l’indique de travailler sur la première lettre de l’élément. Il est donc très utile pour appliquer un style à la première lettre d’un paragraphe en l’appliquant ainsi :

p:first-letter {font-size : 15pt;text-transform : uppercase;}

Ceci vous permet de mettre en majuscule et dans une taille de caractère plus importante la première lettre de chaque paragraphe.

Mais que ce passe-t-il si vous ne souhaitez pas appliquer ce style à tous les paragraphes mais seulement au premier rencontré ? Et bien, pour résoudre ce problème l’une des solutions est d’utiliser le caractère + qui va indiquer qu’un élément suit un autre élément. En pratique il faudra procéder comme suit :

p:first-letter {font-size : 15pt;text-transform : uppercase;}
p + p:first-letter {text-transform:none;}

On peut aller plus loin avec les attributs qui permettent de contrôler les attributs de chaque élément HTML. Ainsi, il est tout à fait possible d’appliquer des styles en fonction de l’attribut href d’un lien construit avec la balise <a>. On procédera ainsi pour différencier les liens :

/* un lien qui débute par http */
a[href^="http:"] { background-color:#000;color:#FFF;}
/* un lien vers un site précis */
a[href^="http://www.artenet.fr"] {background-color:#111199;}

Et pour terminer ce rapide rafraichissement de la mémoire, voici tout cela mis bout à bout si vous souhaitez tester dans un navigateur Internet :

<html>
<head>
<title>Mes tests pour le blogtitle>
<style type="text/css">
p:first-letter {font-size : 15pt;text-transform : uppercase;}
p + p:first-letter {text-transform:none;}
/* un lien qui débute par http */
a[href^="http:"] { background-color:#000;color:#FFF;}
/* un lien vers un site précis */
a[href^="http://www.artenet.fr"] {background-color:#111199;}
style>
head>
<body>
<h1>Titre la pageh1>
<p>ma page de test pour le blog avec du texte en <strong>grasstrong>,
de l’<em>italiqueem> et un <a href="http://www.google.fr">lien externea>,
<a href="http://www.artenet.fr">un lien externe arteneta> et un
autre <a href="./mapage.html">lien internea>p>
<p>un autre paragraphe aussi…p>
body>
html>

Ainsi que le résultat que vous devriez obtenir :

Pseudo élément et attributs CSS

N’oubliez pas de contrôler quand même que cela fonctionne bien dans tous les navigateurs, en particulier ceux utilisés par la cible de votre site Internet.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.