Duda con Selector Adyasente

[juanca2626]

Hola amigos, estoy empezando a meterme de lleno con los css, y hay algo que no me cuadra no lo entiendo y no se como hacerlo.
estoy tratando de entender este tipo de seleccion, quiero que solo se aplique este estilo al div de class content y no me hace caso le aplica al segundo div.content2 , y lo pinta todo de rojo, quisieran que me explicaran como debo hacerlo y como funciona esto. les pongo el codigo.

div.content + div {
color:red;
}

<div class="content">
<div>1
<div>Primero</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>

</div>

<div class="content2">
<div>1
<div>Primero</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

</div>

[3nr1c]

Estás usando un selector incorrecto, tienes que hacer:

Código CSS:

div.content {
color:red;
}
 

Un saludo

[juanca2626]

gracias por responderme 3nr1c, pero creo que no explique lo que quiero lograr con ese estilo, supese que se entendia.

lo que quiero lograr. es pintar de color rojo el div con la clase content. pero no todos
elementos sino los div con el valor 2,3,4 osea apartir del segungo, supuestamente ese selector debe de funcionar. solo qeu no hace caso a que div debe aplicar. lo esta haciedo como si yo estubiera haciendo esto.

div + div {
color:red;
}

por eso es que pinta de rojo todo el div con la clase content2. y yo quiero que eso se aplique solo a los elementos del primer bloque el de la clase content.

ojala me aya explicado bien.

gracias.

[juanca2626]

bueno al final ya logre entender esto. con mi ante penultima respuesta :pensando:

esto funciona div + div o p+p y lo que yo no entendia era eso. pense que al poner
(div.content + div) ya div.content era el primer div y no era asi, ese es el selector. para que funcione lo que quiero debo de ponerlo asi.

div.content div + div {
color:red;
}

y al poner asi ( div.content + div) es como si hiciera div + div , ojala algun experto me saque de esta duda.

:risa:

gracias.

[juanca2626]

con esta tecnica puedo logras un menu con una separacion de linea entre cada opcion. algo basico claro jejejeje. les dejo el codigopara que lo entiendan mejor los que no saben.

<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>


.menu li{
display:inline;
margin-right:10px;
}

.menu li + li{
border-left:1px #666 solid;
padding-left:10px;
}