has - css selector selenium

¿Hay un selector CSS de "hermanos anteriores"?

Question

+ es para el próximo hermano. ¿Hay un equivalente para el hermano anterior?

Answer 1

+ es para el próximo hermano. ¿Hay un equivalente para el hermano anterior?

Puede utilizar los dos selectores de hacha :! y ?

Hay 2 selectores de hermanos posteriores en CSS convencional:

• + es el siguiente selector inmediato de hermanos
• ~ es el selector de hermanos posterior

En CSS convencional, no hay un selector de hermanos anterior .

Sin embargo, en la biblioteca de postprocesadores CSS de ax , hay 2 selectores de hermanos anteriores:

• ? es el selector de hermanos anterior inmediato (opuesto a + )
• ! es el selector de hermanos anterior (opuesto a ~ )

Ejemplo de trabajo:

En el siguiente ejemplo:

• .any-subsequent:hover ~ div selecciona cualquier div subsiguiente
• .immediate-subsequent:hover + div selecciona el div subsiguiente inmediato
• .any-previous:hover ! div .any-previous:hover ! div selecciona cualquier div anterior
• .immediate-previous:hover ? div .immediate-previous:hover ? div selecciona el div previo inmediato

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Answer 2

Considere la propiedad de order de flex y diseños de cuadrícula.

Me centraré en flexbox en los ejemplos a continuación, pero los mismos conceptos se aplican a Grid.

Con flexbox, se puede simular un selector de hermanos anterior.

En particular, la propiedad de order flexible puede mover elementos alrededor de la pantalla.

Aquí hay un ejemplo:

Desea que el elemento A se vuelva rojo cuando el elemento B se desplaza.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

PASOS

1. Hacer la ul un envase flexible.
   
   

   ul { display: flex; }

2. Invertir el orden de los hermanos en el marcado.
   
   

   <ul>
      <li>B</li>
      <li>A</li>
   </ul>

3. Use un selector de hermanos para apuntar al Elemento A ( ~ o + lo hará).
   
   

   li:hover + li { background-color: red; }

4. Use la propiedad de order flexible para restaurar el orden de los hermanos en la pantalla visual.
   
   

   li:last-child { order: -1; }

...¡y voilá! Nace un selector de hermanos anterior (o al menos simulado).

Aquí está el código completo:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

De la especificación de flexbox:

5.4. Orden de visualización: la propiedad de order

Los elementos flexibles se muestran y se distribuyen de forma predeterminada en el mismo orden en que aparecen en el documento de origen. La propiedad de order se puede utilizar para cambiar este orden.

La propiedad de order controla el orden en que aparecen los elementos flexibles dentro del contenedor flexible, asignándolos a los grupos ordinales. Toma un solo valor <integer> , que especifica a qué grupo ordinal pertenece el elemento flex.

El valor del order inicial para todos los artículos flexibles es 0.

También ver order en la especificación de diseño de cuadrícula de CSS .

Ejemplos de "selectores de hermanos anteriores" creados con la propiedad de order flexible.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

Una nota al margen - Dos creencias obsoletas sobre CSS

Flexbox está destruyendo las creencias de larga data sobre CSS.

Una de esas creencias es que un selector de hermanos anterior no es posible en CSS .

Decir que esta creencia es generalizada sería una subestimación. Aquí hay una muestra de preguntas relacionadas solo en :

• Seleccione el hermano precedente de un elemento en CSS usando selectores
• CSS: seleccionar hermano anterior
• CSS seleccionar hermano anterior
• Selector anterior adyacente en CSS
• Seleccionar hermanos anteriores en el hover
• Selector de CSS para obtener hermanos anteriores
• Cambia el color de los elementos hermanos en el hover usando CSS
• Cómo seleccionar el hermano anterior usando la sintaxis de selenium css
• Selector de CSS para seleccionar un elemento que viene ANTES de otro elemento?
• Cómo agregar estilo al hermano anterior de la entrada activa usando solo CSS
• Selector de CSS para elementos siguientes y anteriores
• Cómo afectar a otros elementos cuando se mueve un div

Como se describió anteriormente, esta creencia no es del todo cierta. Un selector de hermanos anterior se puede simular en CSS usando la propiedad de order flexible.

El mito del z-index

Otra creencia de larga data ha sido que z-index solo funciona en elementos posicionados.

De hecho, la versión más actual de la especificación, el Borrador del Editor del W3C , todavía afirma que esto es cierto:

9.9.1 Especificando el nivel de pila: la propiedad z-index

z-index

• Valor: auto | | heredar
• Inicial: auto
• Se aplica a: elementos posicionados
• Heredado: no
• Porcentajes: N / A
• Medios de comunicación: visual
• Valor calculado: como se especifica

_{(énfasis añadido)}

En realidad, sin embargo, esta información es obsoleta e inexacta.

Los elementos que son elementos flexibles o elementos de cuadrícula pueden crear contextos de apilamiento incluso cuando la position es static .

4.3. Flexar artículo Z-Ordering

Los elementos flexibles se pintan exactamente igual que los bloques en línea, excepto que el orden de los documentos modificados por el pedido se utiliza en lugar del orden de los documentos sin procesar, y z-index valores de z-index que no sean el auto crean un contexto de apilamiento, incluso si la position es static .

5.4. Ordenamiento del eje Z: la propiedad del z-index

El orden de dibujo de los elementos de la cuadrícula es exactamente el mismo que el de los bloques en línea, excepto que el orden de los documentos modificados por el orden se usa en lugar del orden de los documentos sin procesar, y z-index valores de z-index que no sean los de auto crean un contexto de apilamiento, incluso si la position es static .

Aquí hay una demostración de z-index trabajando en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/

Answer 3

Otra solución de flexbox.

Puedes usar el orden inverso de los elementos en HTML. Luego, además de usar el order como en la respuesta de Michael_B, puedes usar flex-direction: row-reverse; o flex-direction: column-reverse; Dependiendo de su diseño.

Muestra de trabajo

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

Answer 4

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

Digamos que tenemos:

<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 de calcetines (incluidos los colores de los calcetines) se destaque visualmente usando el espaciado?

Lo que sería bueno pero no existe:

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

¿Qué 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 restablecen a 0 para aquellos sin elementos UL (u otras etiquetas) dentro de los LI.

Answer 5

Desafortunadamente, no hay un selector de hermanos "anterior", pero es posible que aún pueda obtener el mismo efecto utilizando el posicionamiento (por ejemplo, flotar a la derecha). Depende de lo que estés tratando de hacer.

En mi caso, quería un sistema de calificación de 5 estrellas principalmente de CSS. Necesitaría colorear (o cambiar el icono de) las estrellas anteriores. Al flotar cada elemento a la derecha, esencialmente obtengo el mismo efecto (el html para las estrellas debe escribirse ''al revés'').

Estoy usando FontAwesome en este ejemplo e intercambiando los unicodes 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/

Answer 6

Dos trucos Básicamente invirtiendo el orden HTML de los elementos deseados en HTML y usando
~ siguiente operador de hermanos :

float-right + invierte el orden de los elementos HTML

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it''s "previous";) elements */
  background:red;
} 

<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Padre con direction: rtl; + Invertir el orden de los elementos internos.

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it''s "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Answer 7

Encontré una forma de estilizar a todos los hermanos anteriores (opuesto a ~ ) que puede funcionar según lo que necesites.

Digamos que tiene una lista de enlaces y cuando se desplaza sobre uno, todos los anteriores deberían ponerse rojos. Puedes hacerlo así:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Answer 8

No hay una forma oficial de hacerlo en este momento, ¡pero puedes usar un pequeño truco para lograrlo! Recuerde que es experimental y tiene algunas limitaciones ... (consulte este enlace si le preocupa la compatibilidad con el navegador)

Lo que puedes hacer es usar un selector CSS3: la pseudo-clasificación llamada nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Limitaciones

• No puede seleccionar elementos anteriores según las clases de los siguientes elementos
• Esto es lo mismo para las pseudo clases.

Answer 9

No, no hay un selector de "hermano anterior".

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 próximo hermano y es CSS2.1.

Consulte Combinador de hermanos adyacentes de los selectores Nivel 3 y 5.7 Selectores de hermanos adyacentes de las Especificaciones de las Hojas de estilo en cascada Nivel 2 Revisión 1 (CSS 2.1) .

Answer 10

Si conoce la posición exacta, una exclusión basada en :nth-child() de todos los siguientes hermanos funcionaría.

ul li:not(:nth-child(n+3))

Lo que seleccionaría todos los li s antes del 3 (por ejemplo, 1 y 2). Pero, en mi opinión, esto se ve feo y tiene un caso de uso muy ajustado.

También puede seleccionar el nth-child de derecha a izquierda:

ul li:nth-child(-n+2)

Lo que hace lo mismo.

Answer 11

Tuve la misma pregunta, pero luego tuve un momento "duh". En lugar de escribir

x ~ y

escribir

y ~ x

Obviamente, esto coincide con "x" en lugar de "y", pero responde que "¿hay una coincidencia?" pregunta, y el simple recorrido de DOM puede llevarlo al elemento correcto de manera más eficiente que hacer un bucle en javascript.

Me doy cuenta de que la pregunta original era una pregunta de 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 hice yo.

Answer 12

Tuve un problema similar y descubrí que todos los problemas de esta naturaleza se pueden resolver de la siguiente manera:

1. Dale a todos tus artículos un estilo.
2. dar un estilo a su elemento seleccionado.
3. Dale a los siguientes artículos un estilo usando + o ~.

y de esta manera, podrá aplicar un estilo a sus elementos actuales anteriores (todos los elementos reemplazados con los elementos actuales y siguientes) y sus próximos elementos.

ejemplo:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

Espero que ayude a alguien.

Answer 13

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

previous:has(+ next) {}

... pero en el momento de escribir esto, está a cierta distancia más allá del límite de sangrado para el soporte del navegador.