html - selectores - selector padre css

Elemento de desplazamiento, mostrar el efecto de desplazamiento sobre los elementos principales hermanos hermanos

Question

Veamos ahora, no estoy seguro si tengo la lógica al 100%.

Esto es con lo que estoy trabajando (demostración de arranque aquí )

<ul>
    <li class="row">
        <span class="category col-sm-2 highlight">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Hello world!</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Keep them coming</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">The other posts</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2">Cities</span> 
        <span class="title col-sm-4"><a href="#">Tezt</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
</ul>

La idea es que, al pasar el elemento a en span.title , se span.title el color del texto en publicación y año. También estoy buscando una forma de cambiar el color de la primera categoría span.category del mismo tipo (es decir, al pasar el puntero "The other post" debería cambiar el color de span.category en el primer .row ). ¿Es esto posible con CSS puro?

Answer 1

Entendí lo que tratas de hacer aquí, en este caso, puedes usar el selector de abajo ... para que cuando el li esté suspendido, también aplique el color al primer span

.row:hover span:nth-of-type(1) {
   color: red;
}

Acabo de inspeccionar el DOM en tu violín y me gustaría modificar algunas cosas en eso ...

Demostración ( hover el hola y vea el primer color del span se cambiará)

Demo 2 (DOM Altered): esta es solo una idea general. Te proporcioné el selector, pero de todos modos necesitarás la modificación DOM.

Demostración alterada en tu código

Nuevamente según su comentario, ahora puede resaltar todo el span junto con sus títulos

ul li div.row:hover > span {
   color: red;
}

Demostración final