Estamos metidos de lleno en el estudio de los selectores en CSS3 y vamos a seguir con los selectores combinadores hermano adyacente y hermano general en CSS3. Si eres un recién llegado a este curso, te cuento que esta es la clase 10 del curso de CSS3 desde cero.
Selector combinador hijo
Como seguro recuerdas, el selector combinador descendiente permitía seleccionar una etiqueta en base a su ancestro. En cambio, este selector es mucho más directo, ya que permite seleccionar solamente al hijo directo de un padre. Su sintaxis es la siguiente:
/* CSS */
section>p { background: red; }
<!-- HTML -->
<section>
<p>PRIMER PÁRRAFO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati debitis, omnis est distinctio aperiam sint, harum magnam tempora quas veniam id laboriosam assumenda dolores cumque accusamus iste quia sapiente quis!</p>
<div>
<p>PRIMER DIV Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sunt soluta odit maxime iure tempora corporis suscipit laboriosam. Ea deserunt nostrum itaque eaque dolorem qui et saepe reiciendis ad, repellendus.</p>
</div>
<div>
<p>SEGUNDO DIV Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore perspiciatis asperiores veritatis itaque ratione non alias, enim distinctio amet tenetur pariatur quas optio, ducimus, porro blanditiis repudiandae incidunt! Quod, ratione.</p>
</div>
</section>
El signo >, significa que se seleccionarán solamente las etiquetas <p> que son hijas directas de <section>.
Este selector combinador hermano, es muy similar al descendiente.
Pero es más especifico porque selecciona únicamente a aquellos hijos
directos de una etiqueta. Esto lo realiza gracias al signo >.
Selector combinador hermano adyacente
Su sintaxis es la siguiente:
/* CSS */
p+div { background: red; }
Este selector permite seleccionar a elementos o a etiquetas que comparten un mismo padre, es decir, que son etiquetas hermanas. Pero el primer elemento precede de forma inmediata al segundo.
En el ejemplo de arriba, lo que va a hacer el navegador es seleccionar todas las etiquetas <div> que tienen un hermano <p> que lo precede. Si vamos al documento html, vemos que <p> y <div> son hermanas y <p> precede a <div>, con lo cual sera seleccionado solo el <div> que esta precedido por <p>. Incluso podríamos ser más específicos si quisieramos, vemos un ejemplo:
/* CSS */
section p+div { background: red; }
En el siguiente ejemplo, tenemos 4 párrafos dentro de un <section>, los párrafos seleccionados serían, 2, 3 y 4. Esto es porque con el párrafo 1, no se cumple la regla. Es decir, que el párrafo 1 no esta precedido por otro párrafo con lo cual no podemos seleccionarlo con esta regla.
/* CSS */
section p+p { background: blue; }
<!-- HTML --> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui beatae eaque eligendi tenetur similique eius, delectus accusamus quaerat corrupti maiores praesentium, nobis sapiente ducimus assumenda suscipit, ipsa reiciendis architecto dolore!</p> <p>Possimus nisi facilis ratione molestias itaque perspiciatis sequi nam accusantium tempore sapiente, provident hic sint ipsum quo incidunt temporibus quia? Ad natus quisquam dicta eos consequatur odit, dolore hic illo.</p> <p>Repudiandae voluptate enim autem rerum labore asperiores nam illum ad libero repellendus ut maiores rem suscipit fugit perspiciatis, quod tempore unde, molestias sunt est minus! Placeat natus libero aperiam ullam.</p> <p>Illo, similique perferendis error sequi tenetur debitis vel vero ullam, dolores, non cumque at! Accusantium aliquam blanditiis voluptates eius iusto amet quisquam eum, delectus obcaecati eligendi sed distinctio incidunt facere?</p> </section>
Selector combinador hermano general
Este selector nos permite afectar o seleccionar un elemento cuando tiene un hermano que lo precede. Pero no lo precede directamente o de forma inmediata.
Su sintaxis es la siguiente:
/* CSS */
h1~h2 { background: blue; }
De esta manera estamos diciendo lo siguiente, se van a seleccionar aquellas etiquetas <h2> que tienen un hermano <h1> que lo precede. Pero que no lo precede directamente, podemos verlo en el siguiente ejemplo. Han quedado seleccionadas los <h2> aunque no tenían a <h1> como hermano que lo precedía de manera directa. Esto se lo indicamos al navegador con la virgulilla ~.
<!-- HTML -->
<section>
<h1>TITULO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui beatae eaque eligendi tenetur similique eius, delectus accusamus quaerat corrupti maiores praesentium, nobis sapiente ducimus assumenda suscipit, ipsa reiciendis architecto dolore!</p>
<h2>Subtitulos</h2>
<p>Possimus nisi facilis ratione molestias itaque perspiciatis sequi nam accusantium tempore sapiente, provident hic sint ipsum quo incidunt temporibus quia? Ad natus quisquam dicta eos consequatur odit, dolore hic illo.</p>
<h2>Subtitulos</h2>
<p>Repudiandae voluptate enim autem rerum labore asperiores nam illum ad libero repellendus ut maiores rem suscipit fugit perspiciatis, quod tempore unde, molestias sunt est minus! Placeat natus libero aperiam ullam.</p>
</section>
Debo reconocer que cuando empecé a estudiar estos selectores, creía que no los iba a utilizar jamás. Pero realicé una web donde me encontré con situaciones donde utilizar estos selectores me hizo la vida más fácil. Y me vi obligado a revisar mis apuntes porque ya no me acordaba, por eso hice este blog, porque mientras escribo me esta sirviendo de repaso.
Finalizando la clase
Cada vez vamos avanzando más y más en CSS3. Y es que el tema de los selectores en CSS3 da para muchas clases y muchos apuntes recopilados. Voy a intentar publicar más clases por semana, pero estoy con bastantes cosas iniciadas y además me he puesto a estudiar JavaScript. Pero bueno, yo me lo he propuesto y no va a ser por no haberlo intentado.
Coméntame que te ha parecido esta clase y que te está pareciendo el curso de CSS3 desde cero. Me interesa muchisimo tu opinión al respecto, me gustaría saber en que puedo mejorar o si tienes una opinión negativa. Mientras las criticas seán constructivas y respetuosas, bienvenidas sean.
Por favor, comparte esta publicación en redes sociales. De esta manera me ayudas a que este proyecto crezca y llegue a más personas.
¡HASTA LA PROXIMA CLASE!
0 Comentarios