Para este caso específico podes usar un .each()
para las tablas de clase .GRID
y dentro de la iteración buscar con find()
los th:visible
y aplicar el css sólo al primero con .first()
.
$('.GRID').each(
function() {
$(this).find('th:visible').first().css({
borderRadius: "6px 0 0 6px",
});
}
);
$('.mTabla').each(
function() {
$(this).find('th:visible').first().css({
background: "yellow",
borderRadius: "6px 0 0 6px",
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table class="mTabla" id="sdsdsdsf2" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
Para casos mas generales del tipo "aplicar CSS al primer elemento de tipo+clase X en varios grupos" donde "primer" es relativo al grupo (y no siempre es el :first-child
o :first-of-type
), hay varias opciones, aquí hay 3, la tercera es la mas compacta (busca, filtra, aplica css).
Opción 1
Modificar todos los th:visible
y "desmodificar" todos los th
que no son el primer th:visible
(todo th
que sea hermano y esté a continuación de un th:visible
)
$("th:visible").css({
borderRadius: "6px 0 0 6px",
});
$("th:visible~th").css({
borderRadius: 0,
});
$("th:visible").css({
background: "yellow",
borderRadius: "6px 0 0 6px",
});
$("th:visible~th").css({
background: "none",
borderRadius: 0,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
Opción 2
Variación del caso específico. No muy eficiente pero permite no saber el parent a priori, para todos los th:visible
buscar el elemento padre y por cada padre buscar el primer th:visible
$("th:visible").parent().each(function() {
$(this).find("th:visible").first().css({
borderRadius: "6px 0 0 6px",
})
});
$("th:visible").parent().each(function() {
$(this).find("th:visible").first().css({
background: "yellow",
borderRadius: "6px 0 0 6px",
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
Opción 3
Variación de opción 1 usando el filtro .not()
de jQuery, encuentra todos los th:visible
e ignora aquellos th
hermanos que estén precedidos por un th:visible
$("th:visible").not("th:visible~th").css({
borderRadius: "6px 0 0 6px",
});
$("th:visible").not("th:visible~th").css({
background: "yellow",
borderRadius: "6px 0 0 6px",
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
<tbody>
<tr>
<th style="display: none;" scope="col">#IdOculto</th>
<th style="width: 200px;" scope="col">A1</th>
<th style="width: 250px;" scope="col">A2</th>
<th style="width: 200px;" scope="col">A3</th>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">57</td>
<td>D1</td>
<td>D1</td>
<td>D1</td>
</tr>
<tr id="sdsdsds" style="cursor: pointer;">
<td style="display: none;">58</td>
<td>D2</td>
<td>D2</td>
<td>D2</td>
</tr>
</tbody>
</table>
Notas
Opción 1 y opción 3 basados en la respuesta https://stackoverflow.com/a/8539107/1423096 de BoltClock
eq(0)
es equivalente a decir "la primera ocurrencia" o "la ocurrencia con índice 0" simplemente saca esa parte del selector y déjalo así'th:visible'