{"id":471,"date":"2024-08-06T14:23:44","date_gmt":"2024-08-06T14:23:44","guid":{"rendered":"https:\/\/sidroniolima.com.br\/blog\/?p=471"},"modified":"2024-08-06T14:23:44","modified_gmt":"2024-08-06T14:23:44","slug":"all-css-combinator-selectors","status":"publish","type":"post","link":"https:\/\/sidroniolima.com.br\/blog\/2024\/08\/06\/all-css-combinator-selectors\/","title":{"rendered":"All CSS Combinator Selectors"},"content":{"rendered":"\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?via=sidroniolima\" class=\"twitter-share-button\">Tweet<\/a><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533.png\" alt=\"\" class=\"wp-image-473\" srcset=\"https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533.png 800w, https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533-300x188.png 300w, https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533-768x480.png 768w, https:\/\/sidroniolima.com.br\/blog\/wp-content\/uploads\/2024\/08\/aplicando-estilos-css-1521410533-620x388.png 620w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">A useful CSS tip for selecting nested elements<\/h2>\n\n\n\n<p>This a handful table that shows how to <em>combinator<\/em> selectors works.<\/p>\n\n\n\n<p>According to the w3schools, a <em>combinator<\/em> <\/p>\n<blockquote>\n<p>&#8220;is something that explains the relationship between the selectors&#8221;<\/p>\n<\/blockquote>\n\n\n\n<p>There are four combinators:<\/p>\n<ul>\n<li>descendant selector which is represented by a <span style=\"background-color: #999999; color: #ffffff;\"><strong><em>space<\/em><\/strong><\/span><\/li>\n<li>child selector, with <span style=\"background-color: #999999; color: #ffffff;\"><em><strong>&gt;<\/strong><\/em><\/span> signal<\/li>\n<li>adjacent sibling selector, a <span style=\"background-color: #999999; color: #ffffff;\"><em><strong>+<\/strong><\/em><\/span> signal<\/li>\n<li>general sibling selector, a <span style=\"background-color: #999999; color: #ffffff;\">~<\/span> signal<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Above, some examples<\/h3>\n\n\n\n<p>Consider the following HTML structure<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n\n&lt;h2&gt;Descendant Selector&lt;\/h2&gt;\n\n&lt;p&gt;The descendant selector matches all elements that are descendants of a specified element.&lt;\/p&gt;\n\n&lt;div&gt;\n  &lt;p&gt;Paragraph 1 in the div.&lt;\/p&gt;\n  &lt;p&gt;Paragraph 2 in the div.&lt;\/p&gt;\n  &lt;section&gt;&lt;p&gt;Paragraph 3 in the div.&lt;\/p&gt;&lt;\/section&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;Paragraph 4. Not in a div.&lt;\/p&gt;\n&lt;p&gt;Paragraph 5. Not in a div.&lt;\/p&gt;\n\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The <strong>descendant selector<\/strong> (white space) selects all elements that are descendant of a specified element. So, the next code will paint the three &lt;p&gt; elements inside the div with the yellow color, including the one inside the &lt;section&gt; element.<\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>div p {\n  background-color: yellow;\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The <strong>child selector<\/strong> ( &gt; ) selects all elements that are children of a specified element. So, the next code will paint the pair of &lt;p&gt; elements inside the div with the yellow color. But not the &lt;p&gt; inside the &lt;section&gt; because this element is not a child, but a descendant.<\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>div &gt; p {\n  background-color: yellow;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The <strong>adjacent sibling selector<\/strong> ( + ) selects an element that is directly after another specific element. So, the next code will paint only the 4th &lt;p&gt; element, since it is the only directly after a &lt;div&gt;.<\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>div + p {\n  background-color: yellow;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>The\u00a0<strong>general sibling selector<\/strong> ( ~ ) selects all elements that are next siblings of a specified element. So, the next code will paint the last pair of &lt;p&gt; elements.<\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>div ~ p {\n  background-color: yellow;\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<p>CSS is intriguing technology with many cool features that can be applied to enhance a great variety of UI\/UX proposes. And is very funny to learn.<\/p>\n\n\n\n<p>I recommend the <a href=\"https:\/\/www.udemy.com\/course\/advanced-css-and-sass\/?couponCode=ST10MT8624\" target=\"_blank\" rel=\"noopener\">Advanced CSS and Sass<\/a> course by Jonas Schmedtmann at Udemy.<\/p>\n\n\n\n<p>Have fun.<\/p>\n\n\n\n\n\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?via=sidroniolima\" class=\"twitter-share-button\">Tweet<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A useful CSS tip for selecting nested elements This a handful table that shows how to combinator selectors works. According to the w3schools, a combinator &#8220;is something that explains the relationship between the selectors&#8221; There are four combinators: descendant selector which is represented by a space child selector, with &gt; signal adjacent sibling selector, a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[132,53],"tags":[],"class_list":["post-471","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/comments?post=471"}],"version-history":[{"count":2,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/471\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/471\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/media?parent=471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/categories?post=471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/tags?post=471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}