{"id":816,"date":"2023-07-29T01:59:31","date_gmt":"2023-07-29T01:59:31","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=816"},"modified":"2023-07-29T02:08:50","modified_gmt":"2023-07-29T02:08:50","slug":"selectores-hermano-css","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/selectores-hermano-css\/","title":{"rendered":"Selectores AVANZADOS CSS. (Selectores hermanos)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.146em, 1.146rem + ((1vw - 0.2em) * 0.818), 1.8em);\">Selector de hermano adyacente.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es un selector combinador, porque para funcionar necesita m\u00e1s de dos selectores, Imagina que tenemos distintas secciones, donde siempre elemento con la clase titulo y despu\u00e9s un p\u00e1rrafo, pero ese p\u00e1rrafo no tiene una clase declara. \u00bfC\u00f3mo le dar\u00edamos estilos con CSS?<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section&gt;\n    &lt;h2 class=\"titulo\"&gt;Hola, Soy un elemento H2&lt;\/h2&gt;\n    &lt;p&gt;Soy un p\u00e1rrafo.&lt;\/p&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">El selector de hermano adyacente es perfecto para esto, ya que selecciona al hermano siguiente, de un elemento dado. (Este selector se utiliza con el s\u00edmbolo de sumar <code>+<\/code>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed te muestro el ejemplo de como funciona:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.elemento_de_referencia + .hermano_siguiente{\n\t\/* Estilos Aplicados *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Un hermano adyacente es el hermano siguiente, debe ser el siguiente hermano del elemento de referencia. (Si no es el siguiente hermano, no se cumplir\u00e1 la condici\u00f3n)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-1024x554.jpeg\" alt=\"\" class=\"wp-image-801\" width=\"840\" height=\"454\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-1024x554.jpeg 1024w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-300x162.jpeg 300w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-720x390.jpeg 720w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-768x415.jpeg 768w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css-1536x831.jpeg 1536w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2023\/07\/hermanos_adyacentes_css.jpeg 1756w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo siguiente se muestran 3 cajas, la caja n\u00famero 2 es hermana adyacente de la caja n\u00famero 1, y la caja n\u00famero 3 es hermana adyacente de la caja n\u00famero 2.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por otra parte la caja n\u00famero 1 no es hermana adyacente de nadie porque no hay ninguna caja antes de ella, y la caja n\u00famero 3 no tiene hermanos adyacentes porque no hay ninguna caja despu\u00e9s de ella.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Volviendo al problema principal, para poder seleccionar al p\u00e1rrafo que es hermano siguiente de el elemento con la clase <code>titulo<\/code>, basta con usar el selector de hermano adyacente de la siguiente manera:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.titulo + p{\n\tcolor: red;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora seleccionar\u00e1 a todos los p\u00e1rrafos, que son hermanos siguientes del titulo.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n    [data-id=\"seccion-curso\"]{\n        background-color: #0A0D3F;\n        color: #fff;\n        box-sizing: border-box;\n        padding: 40px 30px;\n        text-align: center;\n    }\n\n    [data-id=\"seccion-curso\"] h2{\n        text-align: center;\n        margin: 0 0 20px ;\n        font-size: 32px;\n        color: #fff;\n    }\n\n    [data-id=\"seccion-curso\"] p{\n        margin: 0 0 20px ;\n        font-size: 20px;\n    }\n\n    [data-id=\"seccion-curso\"] a{\n        display: inline-block;\n        padding: 1rem 2rem;\n        color: #0A0D3F;\n        text-decoration: none;\n        background-color: #fff;\n        border-radius: 3rem;\n    }\n<\/style>\n<section data-id=\"seccion-curso\">\n    <h2>DOMINA CSS COMO UN EXPERTO.<\/h2>\n    <p>Al finalizar este curso ser\u00e1s un experto y podr\u00e1s crear cualquier proyecto con CSS, \u00bfTe perder\u00e1s la oportunidad?<\/p>\n    <a href=\"https:\/\/alexcgdesign.com\/cursocss\" target=\"_blank\" rel=\"nofollow noopener\">Ingresa al curso<\/a>\n<\/section>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\">Uso para animaciones:<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Este selector puede ser perfecto para crear animaciones con CSS, vamos a tener esta estructura HTML.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section&gt;\n    &lt;label for=\"check\"&gt;Dame Click&lt;\/label&gt;\n    &lt;input type=\"checkbox\" id=\"check\"&gt;\n\n    &lt;div class=\"box\"&gt;\n        \n    &lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Y estos son mis estilos CSS:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">label {\n    background-color: crimson;\n    color: white;\n    width: 200px;\n    padding: 1rem;\n    text-align: center;\n    display: block;\n    margin-bottom: 30px;\n    cursor: pointer;\n}\n\ninput {\n    display: none;\n}\n\ninput:checked+.box {\n    transform: translateY(200px) rotate(80deg) scale(2);\n}\n\n.box {\n    width: 200px;\n    height: 200px;\n    background-color: tomato;\n    transition: .4s;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Yo puedo saber cuando han activado el input de tipo checkbox con la pseudoclase <code>:checked<\/code>, teniendo esto en cuenta yo puedo usar el selector de hermanos adyacentes, para darle una animaci\u00f3n a su hermano adyacente box, cuando el input este activo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto lo har\u00e9 con el siguiente c\u00f3digo CSS:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">input:checked+.box {\n    transform: translateY(200px) rotate(80deg) scale(2);\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\">Uso para agregar espaciados:<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Yo tengo este HTML, y quiero que todos los p\u00e1rrafos tengan un espaciado de 20px entre ellos, si yo a los parrafos les doy un <code>margin-top:40px;<\/code> aparentemente se soluciona el problema, pero el primer elemento igual toma un <code>margin-top<\/code>, y yo no quiero eso.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section classs=\"container\"&gt;\n    &lt;p&gt;Soy un P\u00e1rrafo #1&lt;\/p&gt;\n    &lt;p&gt;Soy un P\u00e1rrafo #2&lt;\/p&gt;\n    &lt;p&gt;Soy un P\u00e1rrafo #3&lt;\/p&gt;\n    &lt;p&gt;Soy un P\u00e1rrafo #4&lt;\/p&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que puedo hacer es utilizar el selector de hermanos adyacentes junto con el selector de hijo directo.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.container&gt;*+* {\n    margin-top: 40px;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Exactamente de esta manera, lo que hacemos aqu\u00ed es decirle que todos los hijos directos de padre que tengan sean un hermano adyacente tomar\u00e1n un <code>margin-top<\/code> de 40px, y como el primero elemento no es un hermano adyacente de nadie, ese elemento no toma el margin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Te reto a crear un men\u00fa animado utilizando esta propiedad de CSS.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.146em, 1.146rem + ((1vw - 0.2em) * 0.818), 1.8em);\">Selector de hermanos generales.<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Volviendo al ejemplo anterior que pasa si yo quisiera seleccionar a todos los elementos p\u00e1rrafo que sean hermanos del elemento con la clase <code>titulo<\/code>, solamente seleccionar\u00eda al hermano siguiente, no a todos sus hermanos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El selector de hermanos generales, selecciona a todos los hermanos siguientes que si cumplan con la condici\u00f3n, funciona exactamente igual que el selector de hermanos adyacentes, solamente que este si selecciona a todos los hermanos siguientes. Utiliza el s\u00edmbolo de la virgulilla ~.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.elemento_de_referencia ~ .hermanos_siguiente{\n\t\/* Estilos Aplicados *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Con el c\u00f3digo siguiente seleccionaremos a todos los p\u00e1rrafos que sean hermanos del elemento con la clase <code>titulo<\/code>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.titulo ~ p{\n\tcolor: red;\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\">Solucionando problema en animaciones:<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo anterior para aplicar animaciones, que pasar\u00eda si se cambiar\u00e1 la estructura HTML de esta manera:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;section&gt;\n    \n    &lt;input type=\"checkbox\" id=\"check\"&gt;\n    &lt;label for=\"check\"&gt;Dame Click&lt;\/label&gt;\n\n    &lt;div class=\"box\"&gt;\n        \n    &lt;\/div&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora la caja <code>box<\/code>, no ser\u00eda hermano adyacente del input, y no funcionar\u00eda el c\u00f3digo de la animaci\u00f3n, para arreglarlo podr\u00edamos usar el selector de hermanos generales.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">input:checked ~ .box {\n    transform: translateY(200px) rotate(80deg) scale(2);\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\">\u00bfQuieres ver como implemento esto de manera practica?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">He creado un tutorial en YouTube donde te explico como utilizar estos selectores.<\/p>\n\n\n\n<iframe style=\"aspect-ratio:16\/9;width: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/c6W_zEPFw74\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n    [data-id=\"boton-youtube\"]{\n        display:block;\n        margin: 0 auto;\n        padding: 1rem 2rem;\n        color: #fff;\n        text-decoration: none;\n        background-color: #c4302b;\n        border-radius: 3rem;\n        width:max-content;\n    }\n<\/style>\n<a href=\"https:\/\/youtu.be\/c6W_zEPFw74\" target=\"_blank\" rel=\"nofollow noopener\" data-id=\"boton-youtube\">Ver v\u00eddeo en YouTube<\/a>\n\n\n\n<div style=\"height:59px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Selector de hermano adyacente. Es un selector combinador, porque para funcionar necesita m\u00e1s de dos selectores, Imagina que tenemos distintas secciones, donde siempre elemento con la clase titulo y despu\u00e9s un p\u00e1rrafo, pero ese p\u00e1rrafo no tiene una clase declara. \u00bfC\u00f3mo le dar\u00edamos estilos con CSS? El selector de hermano adyacente es perfecto para esto, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[],"class_list":["post-816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutoriales"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=816"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/834"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}