Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Css Nth-child

CSS - Css Nth-child

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

Css Nth-child

Publicado por AUS (2 intervenciones) el 15/03/2021 16:10:19
Buenos días
tengo una tabla con varias columnas y quiero que algunas e ellas tengan determinados colores
Por ejemplo columna 2, 3 color eojo, columnas 5,6,7,8 color naranaja, columanas 10,11,12 color verde
Las columnas no cumplen ningun criterio de paras o impares ..
Como puedo hacerlo
he usado nth-child(2) pero tendria que ir una por una , Hay alguna manera de que aplique a determinadas columnas
he probado con nth-child(2)., cth-child (3) y no funciona
Muchas gracias
AUS
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Css Nth-child

Publicado por joel (252 intervenciones) el 15/03/2021 17:46:05
Hola Aus, hasta donde yo se, para seleccionar el 5, 6, 7 y 8 la única manera es como indicas, concatenando nth-child.. algo así:

1
.first>span:nth-child(5), .first>span:nth-child(6), .first>span:nth-child(7), .first>span:nth-child(8)

Aquí un ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .first>span:nth-child(5), .first>span:nth-child(6), .first>span:nth-child(7), .first>span:nth-child(8) {color:Red}
</style>
 
<div class="first">
    <span>Span 1!</span>
    <span>Span 2</span>
    <span>Span 3!</span>
    <span>Span 4</span>
    <span>Span 5!</span>
    <span>Span 6</span>
    <span>Span 7!</span>
    <span>Span 8!</span>
    <span>Span 9!</span>
    <span>Span 10!</span>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Adelmo
Val: 24
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Css Nth-child

Publicado por Adelmo (6 intervenciones) el 25/03/2021 03:16:20
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
<table cellspacing="0" width="100%">
  <colgroup>
    <col>
    <col class="rojo" span="2">
    <col>
    <col class="naranja" span="4">
    <col>
    <col class="verde" span="3">
  </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
          <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
          <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
          <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
          <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
        </tr>
        <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
          <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
          <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
        </tr>
 
    </tbody>
</table>
1
2
3
4
5
6
7
8
9
.rojo {
  background-color: #FF0000;
}
.naranja {
  background-color: #FF6F00;
}
.verde {
  background-color: #009D00;
}
https://jsfiddle.net/addonisdl/vwb8qx1s/3/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 5
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

Css Nth-child

Publicado por AUS (2 intervenciones) el 25/03/2021 20:27:13
Muchas gracias
Es justo lo que necesitaba
Saludos,
AUS
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar