operadores - selectores de atributos css

¿Usar un espacio o mayor que signo> en el selector de CSS?

Question

Esta pregunta ya tiene una respuesta aquí:

• CSS Child vs Descendant selectores 7 respuestas

Tengo un código CSS:

.welcome div {
   font-size: 20px;
}

que hace lo que yo quiero que haga, pero también escribiéndolo como

.welcome > div {
   font-size: 20px;
}

Hará lo mismo.

¿Hay alguna razón para usar una sobre la otra o son solo dos formas diferentes de hacer lo mismo?

Answer 1

.welcome div afectará a TODOS los divs dentro de la clase "bienvenido" ... si usa el selector ">" afectará a JUSTOS los hijos de "bienvenido".

como ejemplo:

<div class="welcome">
    <div class="one">
        <div class="two">
        </div>
    </div>
    <div class="other">
</div>

bienvenido div afectará a "uno", "dos" y "otro"

bienvenido> div afectará solo "uno" y "otro"

Answer 2

No, son completamente diferentes, al utilizar > selecciona un elemento secundario, mientras que al usar un espacio se seleccionará un elemento anidado en cualquier nivel.

Por ejemplo…

Usando ␣ / espacio en el selector ...

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

Entonces, aquí, el selector que tiene espacio apuntará al div en cualquier nivel anidado del elemento padre.

Demo (utilizando ␣ / espacio)

.welcome div {
    font-size: 20px;
    color: #f00;
}

Utilizando >

<div class="welcome">
    <section>
        <div>This won''t be selected</div>
    </section>
    <div>This will be selected</div>
</div>

Mientras que aquí, el selector apuntará a su div que es un elemento secundario del elemento que tiene .welcome pero no seleccionará el div que se anida dentro de la etiqueta de la section ya que es un nieto (pero no un hijo) del div exterior.

Demo 2 (Utilizando > )

.welcome > div {
    font-size: 20px;
    color: #f00;
}

Desde MDN : (Para ␣ )

El combinador ␣ (destinado a representar un espacio, o más bien uno o más caracteres de espacio en blanco) combina dos selectores de modo que el selector combinado solo coincida con aquellos elementos que coinciden con el segundo selector para los cuales hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a los selectores secundarios, pero no requieren que la relación entre elementos emparejados sea estrictamente padre-hijo.

Desde MDN : (Para > )

El combinator > separa dos selectores y combina solo aquellos elementos que coinciden con el segundo selector que son hijos directos de elementos que coinciden con el primero. Por el contrario, cuando se combinan dos selectores con el selector descendiente, la expresión del selector combinado coincide con aquellos elementos que coinciden con el segundo selector para los que existe un elemento ancestro que coincide con el primer selector, independientemente del número de "saltos" hasta el DOM.

Answer 3

Significan dos cosas diferentes.

.welcome div significa seleccionar cualquier div que sea descendiente de .welcome . Así que seleccionaría todos estos elementos div :

<section class="welcome">
    <div>Me</div>
    <div>And me
        <div>And me
            <div>And me too!</div>
        </div>
    </div>
</section>

.welcome > div solo selecciona un div hijo directo de .welcome . Asi que:

<section class="welcome">
    <div>It selects me</div>
    <div>And me
        <div>But not me
            <div>And not me either!</div>
        </div>
    </div>
</section>

Lea http://css-tricks.com/child-and-sibling-selectors/ y https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 4

Tomado de la referencia CSS del W3C ,

EF

Coincide con cualquier elemento F que sea descendiente de un elemento E.

mientras

E> F

Coincide con cualquier elemento F que es un elemento secundario de un elemento E.

Un niño es solo la siguiente generación. Un descendiente es un individuo en cualquier generación siguiente.

Answer 5

si utiliza

.welcome div
{
   font-size: 20px;
}

css se aplicará a todos los div descendientes de .welcome

si utiliza

.welcome > div
{
  font-size: 20px;
}

css se aplicará solo a divs secundarios directos y no a sus descendientes

por favor encuentre el enlace http://jsfiddle.net/65rL6/

¡Espero eso ayude!

Answer 6

.welcome div

Selecciona todos los elementos dentro de un elemento con una clase de "bienvenida"

.welcome>div

selecciona todos los elementos donde el padre es un elemento con la clase ".welcome"