Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

Connaissez vous bien CSS ?

Afin de tester le Compresseur de CSS  de Poppyto j'ai fait  une règle bien sympathique :)

div[class~=A][class="A B"] + div[class=B] div[lang|=fr]:first-child > a[href^="http://"]:before
{
  content: "l'adresse est " attr(href) " " url(http://www.codes-sources.com/gfx/logos/logocs.gif) " \2713 ";
  color:#248;
  text-decoration:none;
}

Pour tester votre niveau de CSS, je lance un mini-concours (y'a rien à gagner) :

Lequel de vous est capable de m'expliquer ce selecteur ?

PS : Renaud, Azra, vous qui vous êtes beaucoup amélioré en CSS (le contraire était de toute facon impossible), y arriverez vous ?

Posted: mercredi 14 décembre 2005 01:15 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Poppyto a dit :

Même si je reconnais des trucs, je sèche !
Sniff ;'(
# décembre 14, 2005 01:49

Aurelien a dit :

Allez, je vous aide un peu, pour comprendre cette règle, il faut chercher un poil dans le draft de la proposition CSS 3.0
# décembre 14, 2005 09:33

cyril a dit :

Ah vi j'avais pas vou qu'il y avait un tout petit peu de CSS3 :/

mais tout le reste c'est du CSS2.1
# décembre 14, 2005 09:43

themit a dit :

C'est ou qu'on clique ?

moi je suis perdu sans ma souris :D

PS : MDR pour la remarque
# décembre 14, 2005 18:30

Country a dit :

div[class~=A][class="A B"]

L'élément div soit utiliser la classe A (les nom des classes utilisées dont séparées par des espaces) et la valeur de class doit être exactement égale à "A B" (utilisation des classes A et B), le 1er sélecteur n'est donc pas nécessaire.

+ div[class=B]

L'élément suivant doit être un élément div de class B

div[lang|=fr]:first-child

Son 1er enfant doit être un élément div dont la première valeur de lang est fr (les valeurs de l'attribut lang sont séparées par des tirets).

> a[href^="http://"]:before

Le style insérera un élément de contenu devant tous les éléments de type a placés directement sous le div et dont l'attribut href commence par "http://" (CSS3)

Le style :

content: "l'adresse est " attr(href) " " url(http://www.codes-sources.com/gfx/logos/logocs.gif) " \2713 ";

Affiche le texte "l'adresse est " suivit de la valeur le l'attribut href du lien. Affiche ensuite l'image indiquée par l'url, puis le caractère Check Mark (http://www.fileformat.info/info/unicode/char/2713/index.htm)

color:#248;

Applique la couleur #248 au texte ci-dessus

text-decoration:none;

Indique le type de soulignement du texte (ici aucun).

A noter que : le lien ainsi que son style seront aussi appliqués au contenu ajouté par :before et :after. En ce qui concerne le soulignement, celui du lien sera disposé par dessus celui spécifié dans le style ci-dessus. Le text-decoration:none ne sert donc à rien car si le lien est lui-même souligné, ce soulignement sera visible sous le contenu de :before

Exemple de code sur lequel ce style sera appliqué :

<div class="A B">rien</div>
<div class="B">
<div lang="fr-FR"><a href="http://www.truc.com">machin</a></div>
</div>

Voila, j'espère ne rien avoir oublié et ne pas avoir fait d'erreurs ;)
# décembre 14, 2005 20:14

cyril a dit :

Félicitations :)

je n'ai rien à rajouté, c'est tout à fait ca! finalement je n'ai pas eu à faire d'explications.

Pour en savoir plus sur les selecteurs vous pouvez aller voir : http://www.w3.org/TR/REC-CSS2/selector.html
# décembre 14, 2005 20:22

azra a dit :

Ca marche sous IE ce truc? !!

Sinon pour le défis, je dis pas mieux ici :p (et je retourne coté serveur).
# décembre 14, 2005 22:31
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Comment créer un jeu de Pages Modernes dans un Modern Site SharePoint Online en utilisant PowerShell depuis un fichier CSV par Blog Technique de Romelard Fabrice le 10-17-2018, 12:50

- Office 365: Comment Utiliser les Modern Pages dans un Site Intranet SharePoint basé sur le Publishing site par Blog Technique de Romelard Fabrice le 10-16-2018, 15:34

- Office 365: Comment changer le nom “Auteur” dans les pages modernes d'un Modern Site SharePoint Online par Blog Technique de Romelard Fabrice le 10-16-2018, 15:07

- Reprise des articles Codes-Sources de 2011 à 2013 par Blog de Jérémy Jeanson le 08-21-2018, 16:08

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages classiques de SharePoint Online par Blog Technique de Romelard Fabrice le 08-08-2018, 17:27

- Office 365: Modifier les jeux de couleur dans les Thèmes des pages modernes de SharePoint Online par Blog Technique de Romelard Fabrice le 07-04-2018, 13:26

- Office 365: Script PowerShell pour fixer le Quota Warning de toutes les collections d’un tenant par Blog Technique de Romelard Fabrice le 07-03-2018, 14:16

- MVP Award 2018-2019 par Blog de Jérémy Jeanson le 07-02-2018, 20:39

- Reprise des articles de 2014 à aujourd’hui par Blog de Jérémy Jeanson le 06-20-2018, 13:00

- Office 365: Comment créer un sous-plan dans Office 365 Planner par Blog Technique de Romelard Fabrice le 06-14-2018, 17:19