Intervenir sur du CSS à la volée

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 :

Code:

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;}

Et mon HTML :

Code:

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 :

Code:

1
2
.tags .texte2 a{ background:#e65224; }
.tags .texte2 a:before{ border-color:transparent #e65224 transparent transparent;}

et de l'appliquer sur la balise <li> du texte 2 :

Code:

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

Bonjour,

c'est possible sans toucher au HTML :

Code:

1
2
3
4
5
6
7
8
.tags li:first-child a{ background:#e65224; }
.tags li:first-child a:before{ border-color:transparent #e65224 transparent transparent;}
 
.tags li:nth-child(2) a{ background:green; }
.tags li:nth-child(2) a:before{ border-color:transparent green transparent transparent;}
 
.tags li a:hover{background:#555;}
.tags li a:hover:before{border-color:transparent #555 transparent transparent;}

N.B. :first-child équivaut à :nth-child(1).

Mon héros. :)

Salut,

Citation:

Envoyé par bajoe

J'ai essayé de rajouter des propriétés type :
...

Cela ne marche pas car contrairement à ce que tu indiques dans ton message, la classe "texte2" est sur le tag <a> et non pas <li>.
Du coup ton CSS ne correspond plus...

a++