3

Quisiera saber si es posible que mediante css pueda cambiar el formato de un div pero no por su clase o con id, sino identificándolo a través de su valor. No sé si me explico.

Tengo esto en html:

<div>
    <div class="calendar">Mon</div>
    <div class="calendar">Tue</div>
    <div class="calendar">Wed</div>
    <div class="calendar">Thu</div>
    <div class="calendar">Fri</div>
    <div class="calendar">Sat</div>
    <div class="calendar">Sun</div>
</div>

y quisiera saber cómo seleccionar en css al Wed, algo así como acceder a la clase y dirigirme directo a ese a través de su valor por ejemplo.

Pensaba algo tal que así:

.calendar['Wed']{
    color: black;
}

Pero pues obvio, no se puede eso.

1
  • 1
    los dias de la semana vienen siempre en el mismo orden. En este caso puedes utilizar .calendar:nth-child(1) para el primer dia de la semana, .calendar:nth-child(2) para martes ...etc
    – enxaneta
    Commented el 19 jul. 2021 a las 11:30

3 respuestas 3

1

No creo que se pueda, seria mejor que hicieras esto:

<div>
    <div class="calendar-mon">Mon</div>
    <div class="calendar-tue">Tue</div>
    <div class="calendar-wed">Wed</div>
    <div class="calendar-thu">Thu</div>
    <div class="calendar-fri">Fri</div>
    <div class="calendar-sat">Sat</div>
    <div class="calendar-sun">Sun</div>
</div>
2
  • Hola. Muchas gracias por contestar. Igualmente eso es lo que pense en un principio, el problema es que como dije, no me sirve en mi caso cambiarle la clase o ponerle id porque precisamente necesito referirme a traves del valor. Lo que pasa es que en mi trabajo, tengo un script donde genero con un for todos los dias del mes en div's, y pues todos comparten la misma clase, y para cambiarles cosas, necsitaria acceder a ellos precisamente por el valor, pues el for genera 30 div's exactamente iguales donde solo cambia el valor que es 1,2,3,...31 etc. No se si sepas como podria solucionar ese caso Commented el 19 jul. 2021 a las 1:00
  • Dices "tengo un script donde genero con un for todos los dias del mes en div's,". Modifica ese script para modificar la class. Commented el 20 jul. 2021 a las 18:06
0

Con css encontrar un texto html desconozco si se pueda, lo unico que se me ocurre es hacerlo mediante JQuery, no es lo que buscas pero puede ser una opción.

En este caso busco ese texto "Wed" mediante un each con JQuery y le agrego la clase diferente para darle otro estilo css:

<style>
    .diferente{
        color: red;
    }
</style>
<div>
    <div class="calendar">Mon</div>
    <div class="calendar">Tue</div>
    <div class="calendar">Wed</div>
    <div class="calendar">Thu</div>
    <div class="calendar">Fri</div>
    <div class="calendar">Sat</div>
    <div class="calendar">Sun</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $(".calendar" ).each(function( index ) {
        var dia = $( this ).text();
        if(dia=='Wed'){
            console.log('Lo encontre');
            $(this).addClass("diferente");
        }
    });
});
</script>

0

Hola lo que puedes hacer es inventarte el atributo data-value para el elemento div.calendar.

El atributo data-value guardaría los días de la semana que se corresponde al texto del div, de esta manera ya podrías usar css para seleccionar el elemento en especifico de esta manera.

.calendar[data-value="Mon"] {
            color: blue;
}
<div>
        <div class="calendar" data-value="Mon">Mon</div>
        <div class="calendar" data-value="Tue">Tue</div>
        <div class="calendar" data-value="Wed">Wed</div>
        <div class="calendar" data-value="Thu">Thu</div>
        <div class="calendar" data-value="Fri">Fri</div>
        <div class="calendar" data-value="Sat">Sat</div>
        <div class="calendar" data-value="Sun">Sun</div>
</div>

2
  • Vale mencionar que data-* es un atributo html, y que después del guión puede ir cualquier nombre (no solo value), teniendo en cuenta las restricciones.
    – padaleiana
    Commented el 20 jul. 2021 a las 18:20
  • @padaleiana es correcto, me olvidé mencionar eso.
    – user137354
    Commented el 20 jul. 2021 a las 18:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.