{"id":2177,"date":"2017-01-11T03:05:56","date_gmt":"2017-01-11T03:05:56","guid":{"rendered":"http:\/\/cssreset.com\/?p=2177"},"modified":"2017-01-11T03:05:56","modified_gmt":"2017-01-11T03:05:56","slug":"css-combinators-a-guide","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-combinators-a-guide\/","title":{"rendered":"CSS Combinators: A Guide"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\np.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 14.0px}\np.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 16.0px}\np.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 12.0px}\nspan.s1 {font-kerning: none}\nspan.Apple-tab-span {white-space:pre}\n--><\/style>\n<p>CSS combinators are the symbols used in your CSS rules that explain the relationship between selectors. Combinators make it easier to select really specific HTML elements, or to select only one or a few of the same tag type without having to resort to using classes or IDs. The CSS combinators are as follows:<\/p>\n<p><strong>Space<\/strong><\/p>\n<p>Using a space as a CSS combinator is pretty common. Placing a space in between two selectors means that you\u2019re selecting the descendent HTML element, or any element of the second type that is a child the first. So if you want to select every h1 that follows a div, you would use code similar to the code below:<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">div h1<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">color<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #cc00cc\">#555<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p>The code above wouldn\u2019t select every h1 tag, only the h1 tags whose parents are divs.<\/p>\n<p><strong>\u00a0+<\/strong><\/p>\n<p>The plus sign combinator selects adjacent siblings. This means that the two elements must be direct siblings (have the same parent element), and the second one must come right after the first. So let\u2019s say you wanted to select all p tags that have the same parents as an h1 and are placed right after an h1. Here\u2019s how that would look:<\/p>\n<div id=\"ig-sh-2\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">h1 <span style=\"color: #00AA00\">+<\/span> p<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">font-size<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #933\">26px<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><strong>\u00a0&gt;<\/strong><\/p>\n<p>The &gt; sign indicates the child selector. Placing this sign in between two selectors means that you are trying to select the immediate child of the first element. To select all a tags that are direct children of p tags, your CSS would need to look like this:<\/p>\n<div id=\"ig-sh-3\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">p &amp;gt<span style=\"color: #00AA00\">;<\/span> a<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">text-decoration<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #993333\">none<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><strong>~<\/strong><\/p>\n<p>The final combinator in this guide is the general sibling combinator. This symbol can be used to select any siblings of an element (it doesn\u2019t have to be an adjacent sibling like with the + symbol). As long as the two elements share a parent element, you can use the ~ symbol to select the sibling:<\/p>\n<div id=\"ig-sh-4\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">h1 ~ p<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">font-weight<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #993333\">bold<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS combinators are the symbols used in your CSS rules that explain the relationship between selectors. Combinators make it easier to select really specific HTML elements, or to select only one or a few of the same tag type without [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css-combinators-a-guide\/\" title=\"Click to read 'CSS Combinators: A Guide'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,10],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2177"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2177"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2177\/revisions"}],"predecessor-version":[{"id":2178,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2177\/revisions\/2178"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}