1478 votos

¿Existe un selector de "hermanos anteriores"?

El signo más ( + ) es para el siguiente hermano.

¿Existe un equivalente para el hermano anterior?

0 votos

no lo necesitas porque puedes hacer todo con la combinación del selector general más el selector hermano siguiente.

896voto

cletus Puntos 276888

No, no hay un selector de "hermanos anteriores".

En una nota relacionada, ~ es para el hermano sucesor general (lo que significa que el elemento viene después de este, pero no necesariamente inmediatamente después) y es un selector CSS3. + es para el siguiente hermano y es CSS2.1.

Ver Combinador de hermanos adyacentes de Seleccionadores Nivel 3 y 5.7 Seleccionadores de hermanos adyacentes de Especificación de las Hojas de Estilo en Cascada Nivel 2 Revisión 1 (CSS 2.1) .

15 votos

Del estándar CSS3: Los elementos representados por las dos secuencias comparten el mismo progenitor en el árbol de documentos y el elemento representado por la primera secuencia precede a (no necesariamente de forma inmediata) el elemento representado por el segundo.

28 votos

@Lie Ryan: Sí, pero el punto que Cletus está haciendo en su respuesta es que no seleccione el elemento anterior.

48 votos

Aquí hay un ejemplo que hice para ver lo que esto puede, y no puede, hacer. jsfiddle.net/NuuHy/1

178voto

Quentin Puntos 325526

Los selectores de nivel 4 introducen :has() (anteriormente el indicador de materia ! ) que le permitirá seleccionar un hermano anterior con:

previous:has(+ next) {}

pero en el momento de escribir este artículo, se encuentra a cierta distancia del límite de compatibilidad con los navegadores.

65 votos

"El borde sangrante para el soporte del navegador" podría ser una exageración. En el momento de escribir esto, ni siquiera la última versión de Chrome puede utilizar el :has() pseudoclase.

45 votos

@ReedMartin - Por eso dije a cierta distancia del borde sangrante

12 votos

":has no está marcado como parte del perfil del selector dinámico, lo que significa que no puede utilizarse dentro de las hojas de estilo; sólo con funciones como document.querySelector()." - developer.mozilla.org/en-US/docs/Web/CSS/:has

69voto

Bryan Larsen Puntos 2630

Yo tenía la misma pregunta, pero luego tuve un momento de "duh". En lugar de escribir

x ~ y

escribir

y ~ x

Obviamente, esto coincide con "x" en lugar de "y", pero responde a la pregunta "¿hay alguna coincidencia?", y un simple recorrido por el DOM puede llevarle al elemento correcto de forma más eficiente que un bucle en javascript.

Me doy cuenta de que la pregunta original era una pregunta sobre CSS, por lo que esta respuesta es probablemente completamente irrelevante, pero otros usuarios de Javascript pueden tropezar con la pregunta a través de la búsqueda como lo hice yo.

18 votos

Creo que eso funciona cuando y se puede encontrar fácilmente. El problema es que si y sólo se puede encontrar en relación con x, y al invertirlo, no se puede encontrar y porque hay que encontrar primero x. Esto se refiere, por supuesto, a la cuestión de que y sea el hermano anterior y no el siguiente, pero también puede aplicarse a que y sea el hermano siguiente.

19 votos

Estás siendo un poco duro, Harsh. (Lo siento, no pude resistirme.) La cuestión es que a veces sólo necesitas saber "¿existe y?". Otras veces puedes usar ":before" para poner algo entre los dos elementos. Por último, si tienes que recurrir a jQuery, usar find("y ~ x").prev() es más fácil que muchas alternativas.

167 votos

La idea de un selector de hermanos anteriores es que seleccione el elemento anterior. Desafortunadamente, invertirlo, como se describe aquí, no proporciona esta funcionalidad.

2voto

Andrew Leyva Puntos 76

Lamentablemente, no existe un selector de hermanos "anteriores", pero se puede posiblemente aún así obtener el mismo efecto mediante el posicionamiento (por ejemplo, flotar a la derecha). Depende de lo que se intente hacer.

En mi caso, quería un sistema de clasificación de 5 estrellas principalmente CSS. Necesitaría colorear (o cambiar el icono de) las estrellas anteriores. Al hacer flotar cada elemento a la derecha, estoy consiguiendo esencialmente el mismo efecto (el html para las estrellas por lo tanto debe ser escrito 'al revés').

Estoy usando FontAwesome en este ejemplo y cambiando entre los unicódigos de fa-star-o y fa-star http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

1 votos

flotar a la derecha y + o ~ selectores me parece el trabajo más limpio.

2voto

DynamicDan Puntos 72

Dependiendo de su objetivo exacto, hay una manera de lograr la utilidad de un selector de padres sin usar uno (incluso si existiera)...

Digamos que sí:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

¿Qué podemos hacer para que el bloque Calcetines (incluidos los colores de los calcetines) destaque visualmente utilizando el espaciado?

Lo que estaría bien pero no existe:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Lo que sí existe:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

Esto establece que todos los enlaces de anclaje tengan un margen de 15px en la parte superior y lo restablece a 0 para aquellos que no tienen elementos UL (u otras etiquetas) dentro de los LI.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X