Discussion :

[patricktoulon]

bonjour a tous
je me demande si c'est possible

dynamiquement je change la classe de mes element par javascript

chaque classe a son css

dans ces element j'ai un enfant (1 seul)et c'est un autre div
je voudrais savoir si c'est possible d'intégré la classe de l'enfant dans la classe du parent (dans le code CSS) bien sur

exemple mon 1er div change de classe il prend la classe "classe2"et je voudrais mettre la classe de son enfant a l'interieur

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.classe2 {
 /* code css pour l'element */
 div {
  /* code pour l'enfant  */
 }
}

est ce possible sous cette forme ?

[psychadelic]

heu tu formule à l'envers

un <div étant un élément HTML de base, il est forcément parent de toutes les <div d'une page html

si tu lui rajoute une classe, alors les valeurs de style qu tu y place deviennet prioritaire sur la classe <div "parente"

idem si a l'intérieur de ce <div class="ClasseBidule" ...

tous les div qui sont dedans hériteront de cette nouvelle div qui les englobe, sauf si à leur tout ils utilisent une div avec des valeurs dans leur propre classe.


mais si tu veux que toutes les div dont la div parente ai une classe particuliere, mais sans leur affecter une classe, il faut écrire quelque chose dans le genre :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.classe2 {
 /* code css pour l'element */
}
.classe2 > div {
  /* code css pour l'enfant */
}

bon j'ai mis un > pour l'exemple mais en ré&alité il y d'autres Sélecteurs en css (et celui-ci indique une filiation directe uniquement)


sinon, pour la petite histoire, la forme d'écriture que à indiquée est celle qu'on peut utiliser en SASS, ou en Less aussi (?)

[patricktoulon]

bosoir psychadelic

et merci pour le retour
j'avais dejaessayé avec le selecteur">"
probleme pour mes curseurs il y a en a plusieur

et quand je fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
classe1{
 
}
classe1 > div{
 
}
 
classe2{
 
}
classe2 > div{
 
}

la ca deraille la classe2 prend le dessus sauf qu'il n'y a plus que le classe2 qui est affiché les dimention etant dans chaque classe
pourtant quand je regarde le dom (F12) les deux elements ont bien respectivement la classe "classe1" et "classe2"

par contre si en dur je leur met chacun leur classe au demargage le fichier html rend bien le designe different pour chacun
si la classe est modifiée dynamiquement ca deraille
comme si la classe css n'existait pas
c'est pour ca que j'aurais souhaité encapsuler

j'essairais demain soir en rentrant de remonter jusqu'au parent superieur ca m'a tellement pris la tete que j'ai viré le fichier il faut tout réecrire le css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#conteneur .classe1{
 
}
#conteneur .classe1 > div{
 
}
 
#conteneur .classe2{
 
}
#conteneur .classe2 > div{
 
}

[psychadelic]

quand je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
classe1{
 
}
classe1 > div{
 
}
 
classe2{
 
}
classe2 > div{
 
}

la ça déraille

quand il s'agit de classes CSS il faut toujours mettre un point devant (sinon l'interpréteur CSS croit qu'il s'agit d'une balise HTML
donc il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.classe1{

}
.classe1 > div{

}

.classe2{

}
.classe2 > div{

}

[Invité]

Bonjour,


Si tu montrais un code concret plutôt qu'un code bidon, on pourrait tester et/ou voir ce qui ne va pas.

[patricktoulon]

Bonjoujour jreaux62

voila le code
il y a 3 sliders celui du milieu a des attributs pour les classes differents et il ne marche pas

Code html :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
 
.fondd1 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
 
.fondd2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondd1 > div {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
 
.fondd2 > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
 
 
 
.fondg1 {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
  margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondg2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondg1 > div {
 box-shadow: 0 0 1em #58D3F7 inset;
        background-color:rgb(245, 245, 245);
        user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondg2 > div {
 box-shadow: 0 0 1em #6E6E6E inset;
        background-color:rgb(245, 245, 245);
       user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
 
.slide{
     margin-top:5px;
     border:1px solid rgb(240,240,240);
}
 
.slide > div{
       border:1px solid rgb(230,230,230);
}
 
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 //Crs.className = Crs.className + 2;
  dragg = Crs.parentElement;
 dragg.className=dragg.getAttribute("cl2");
          LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 console.log(Crs.id);
 //Crs.className = Crs.className.replace("2", "");
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.className=dragg.getAttribute("cl1");
       }
function ajoute() {
 var messlides = document.getElementsByClassName("slide");
 for (var i = 0; i < messlides.length; i++) {
     messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
            messlides[i].className=messlides[i].getAttribute("cl1");
        }
}
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs5" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond6"  class="slide" cl1="fondg1" cl2="fondg2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs6" class="cur" style="position:absolute;top:0px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond7"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs7" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

pour ceux qui veulent tester sur jsbin