{"id":1312,"date":"2024-08-01T18:45:28","date_gmt":"2024-08-01T16:45:28","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1312"},"modified":"2024-08-01T18:45:29","modified_gmt":"2024-08-01T16:45:29","slug":"38-combinadores-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/38-combinadores-css\/","title":{"rendered":"38. Combinadores CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Un <strong>combinador<\/strong> es algo que explica la relaci\u00f3n entre los <strong>selectores<\/strong>. Un <strong>selector CSS<\/strong> puede contener m\u00e1s de un <strong>selector simple<\/strong>. Entre los <strong>selectores simples<\/strong>, podemos incluir un <strong>combinador<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Exiten 4 diferentes combinadores en CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Selector de descendientes (espacio)<\/li>\n\n\n\n<li>Selector hijo (>)<\/li>\n\n\n\n<li>Selector de hermano adyacente (+)<\/li>\n\n\n\n<li>Selector general de hermanos (~)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Selector de descendientes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>selector de descendientes<\/strong> coincide con todos los elementos que son descendientes de un elemento especificado.&nbsp;El siguiente ejemplo selecciona todos los elementos <strong><em>&lt;p&gt;<\/em><\/strong> dentro de los elementos <strong><em>&lt;div&gt;<\/em><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div p {\n&nbsp;&nbsp;background-color: yellow;\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Selector hijo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El selector hijo selecciona todos los elementos que son los hijos de un elemento espec\u00edfico.&nbsp;El siguiente ejemplo selecciona todos los elementos &lt;p&gt; que son hijos de un elemento &lt;div&gt;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div > p {<br>        background-color: yellow;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Child Selector&lt;\/h2><br><br>    &lt;p><br>      El selector hijo (>) selecciona todos los elementos que son hijos de un<br>      elemento espec\u00edfico.<br>    &lt;\/p><br><br>    &lt;div><br>      &lt;p>Paragraph 1 in the div.&lt;\/p><br>      &lt;p>Paragraph 2 in the div.&lt;\/p><br>      &lt;section><br>        &lt;!-- NO HIJO PERO S\u00cd DESCENDIENTE --><br>        &lt;p>Paragraph 3 in the div (dentro de un elemento section).&lt;\/p><br>      &lt;\/section><br>      &lt;p>Paragraph 4 in the div.&lt;\/p><br>    &lt;\/div><br><br>    &lt;p>Paragraph 5. Not in a div.&lt;\/p><br>    &lt;p>Paragraph 6. Not in a div.&lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Elemento hermano (+)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El selector de hermanos adyacente se usa para seleccionar un elemento que est\u00e1 directamente despu\u00e9s de otro elemento espec\u00edfico.&nbsp;Los elementos hermanos deben tener el mismo elemento principal, y \u00abadyacente\u00bb significa \u00abinmediatamente despu\u00e9s\u00bb.&nbsp;El siguiente ejemplo selecciona el primer elemento <strong><em>&lt;p&gt;<\/em><\/strong> que se coloca inmediatamente despu\u00e9s de los elementos <strong><em>&lt;div&gt;<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div + p {<br>        background-color: yellow;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>Adjacent Sibling Selector&lt;\/h2><br><br>    &lt;p><br>      El selector + se utiliza para seleccionar un elemento que est\u00e1<br>      directamente despu\u00e9s de otro elemento espec\u00edfico.<br>    &lt;\/p><br>    &lt;p><br>      El siguiente ejemplo selecciona el primer elemento p que se coloca<br>      inmediatamente despu\u00e9s de los elementos div:<br>    &lt;\/p><br><br>    &lt;div><br>      &lt;p>Paragraph 1 in the div.&lt;\/p><br>      &lt;p>Paragraph 2 in the div.&lt;\/p><br>    &lt;\/div><br><br>    &lt;p>Paragraph 3. After a div.&lt;\/p><br>    &lt;p>Paragraph 4. After a div.&lt;\/p><br><br>    &lt;div><br>      &lt;p>Paragraph 5 in the div.&lt;\/p><br>      &lt;p>Paragraph 6 in the div.&lt;\/p><br>    &lt;\/div><br><br>    &lt;p>Paragraph 7. After a div.&lt;\/p><br>    &lt;p>Paragraph 8. After a div.&lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Selector general de hermanos (~)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El selector de hermanos general selecciona todos los elementos que son hermanos siguientes de un elemento espec\u00edfico.&nbsp;El siguiente ejemplo selecciona todos los elementos <strong><em>&lt;p&gt;<\/em><\/strong> que son los siguientes hermanos de los elementos <strong><em>&lt;div&gt;<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html><br>&lt;html><br>  &lt;head><br>    &lt;style><br>      div ~ p {<br>        background-color: yellow;<br>      }<br>    &lt;\/style><br>  &lt;\/head><br>  &lt;body><br>    &lt;h2>General Sibling Selector&lt;\/h2><br><br>    &lt;p><br>      El selector general de hermanos (~) selecciona todos los elementos que son<br>      los hermanos siguientes de un elemento especificado.<br>    &lt;\/p><br><br>    &lt;p>Paragraph 1.&lt;\/p><br><br>    &lt;div><br>      &lt;p>Paragraph 2.&lt;\/p><br>    &lt;\/div><br><br>    &lt;p>Paragraph 3.&lt;\/p><br>    &lt;code>Some code.&lt;\/code><br>    &lt;p>Paragraph 4.&lt;\/p><br>  &lt;\/body><br>&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Selector<\/th><th>Ejemplo<\/th><th>Descripci\u00f3n del ejemplo<\/th><\/tr><tr><td><strong>element element<\/strong><\/td><td>div p<\/td><td>Selecciona todos los elementos <em><strong>&lt;p&gt;<\/strong><\/em> dentro de los elementos <strong><em>&lt;div&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong>element &gt; element<\/strong><\/td><td>div &gt; p<\/td><td>Selecciona todos los elementos <strong><em>&lt;p&gt;<\/em><\/strong> donde el padre es un elemento <strong><em>&lt;div&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong>element + element<\/strong><\/td><td>div + p<\/td><td>Selecciona el primer elemento <strong><em>&lt;p&gt;<\/em><\/strong> que se coloca inmediatamente despu\u00e9s de los elementos <strong><em>&lt;div&gt;<\/em><\/strong><\/td><\/tr><tr><td><strong>element1 ~ element2<\/strong><\/td><td>p ~ ul<\/td><td>Selecciona todos los elementos <strong><em>&lt;ul&gt;<\/em><\/strong> que est\u00e1n precedidos por un elemento <strong><em>&lt;p&gt;<\/em><\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Un combinador es algo que explica la relaci\u00f3n entre los selectores. Un selector CSS puede contener m\u00e1s de un selector [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":37,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1312","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un combinador es algo que explica la relaci\u00f3n entre los selectores. Un selector CSS puede contener m\u00e1s de un selector [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1312\/revisions"}],"predecessor-version":[{"id":1315,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1312\/revisions\/1315"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}