Bonsoir à tous,
J'essaye de modifier l'apparence d’éléments HTML à la volée mais je me débrouille mal et rien ne marche.
Dans mon CSS :
Et mon HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64 .tags { margin: 0; padding: 0; position: relative; right: 9px; bottom: -12px; */ list-style: none; } .tags li, .tags a { float: left; height: 24px; line-height: 24px; position: relative; font-size: 11px; margin-bottom: 5px; } .tags a{ margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } * .tags a:before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; } * .tags a:after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .tags a:hover{background:#555;} .tags a:hover:before{border-color:transparent #555 transparent transparent;}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 <ul class="tags"> <li><a href="#">Texte1</a></li> <li><a href="#">Texte2</a></li> <li><a href="#">Texte3</a></li> </ul>
J'aimerais pouvoir modifier l'apparence du Texte2 ou du Texte3 sans avoir à recréer toute une classe .tag
J'ai essayé de rajouter des propriétés type :
et de l'appliquer sur la balise <li> du texte 2 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 .tags .texte2 a{ background:#e65224; } .tags .texte2 a:before{ border-color:transparent #e65224 transparent transparent;}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <li><a href="#" class="texte2">Paris perdus</a></li>
Mais ça ne marche pas...
PS : Sans tenter cette modification, tout marche très très bien
Partager