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: 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

- Office 365: Script PowerShell de création de sous-sites basés sur CSOM ou PnP par Blog Technique de Romelard Fabrice le 06-12-2018, 14:58

- Office 365: Comment exporter tous les comptes Azure Active Directory ayant une license via PowerShell par Blog Technique de Romelard Fabrice le 05-17-2018, 13:46

- PowerShell: Comment avoir le Country Name depuis un Country Code par Blog Technique de Romelard Fabrice le 05-17-2018, 13:20

- Office 365: Comment supprimer un compte externe d’un site SharePoint Online en mode Extranet par Blog Technique de Romelard Fabrice le 05-11-2018, 17:00

- Office 365: Comment reconfigurer le lien “Bloc-notes” d’un teamsite par Blog Technique de Romelard Fabrice le 05-09-2018, 16:45