{"id":3313,"date":"2011-09-19T06:30:46","date_gmt":"2011-09-19T12:30:46","guid":{"rendered":"http:\/\/www.vanseodesign.com\/?p=3313"},"modified":"2011-09-19T06:30:46","modified_gmt":"2011-09-19T12:30:46","slug":"combinators-pseudo-classes","status":"publish","type":"post","link":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/","title":{"rendered":"How To Use CSS Combinators and Simple Pseudo Class Selectors"},"content":{"rendered":"<p>Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on <a href=\"http:\/\/www.vanseodesign.com\/css\/attribute-selectors\/\">attribute selectors<\/a>.<\/p>\n<p>This week I want to continue and talk specifically about combinators before starting to cover <a href=\"http:\/\/www.w3.org\/TR\/css3-selectors\/#pseudo-classes\">pseudo class selectors<\/a>.<br \/>\n<!--more--><br \/>\n<strong>Note:<\/strong> As a reminder the numbers in parenthesis after the combinator or pseudo-class are the version of css they were introduced in.<\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/chaosandcreations\/2324408347\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg\" alt=\"Combination lock\" width=\"465\" height=\"349\" \/><\/a><\/p>\n<h2>Combinators<\/h2>\n<p><a href=\"http:\/\/reference.sitepoint.com\/css\/combinators\">Combinators<\/a>, as the name suggests, are ways to combine several different selectors into new and more specific selectors.<\/p>\n<p>There are <a href=\"http:\/\/reference.sitepoint.com\/css\/combinators\">4 types of combinators<\/a> targeting parent\/child and sibling relationships between elements.<\/p>\n<p><strong>Descendant combinator  E F<\/strong> (1) &mdash; matches an element F that&#8217;s a descendant of an element E. Note that descendant combinators target all descendants and not just direct children.<\/p>\n<p>{code type=html}<\/p>\n<ul>\n<li>List Item 1<\/li>\n<li>List Item 2\n<ol>\n<li>List Item 2-1<\/li>\n<li>List Item 2-2<\/li>\n<\/ol>\n<\/li>\n<li>List Item 3<\/li>\n<\/ul>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\nul li {background: red;}<br \/>\n{\/code}<\/p>\n<p>All 5 list items will be styled with a red background as each is a descendent (either child or grandchild) of the unordered list.<\/p>\n<p><strong>Child combinator E > F<\/strong> (2) &mdash; matches an element F that&#8217;s a <a href=\"http:\/\/css-tricks.com\/5514-child-and-sibling-selectors\/\">child of an element E<\/a>. The difference here is that F must be a direct child of E.<\/p>\n<p>{code type=html}<\/p>\n<ul>\n<li>List Item 1<\/li>\n<li>List Item 2\n<ol>\n<li>List Item 2-1<\/li>\n<li>List Item 2-2<\/li>\n<\/ol>\n<\/li>\n<li>List Item 3<\/li>\n<\/ul>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\nul>li {background: red;}<br \/>\n{\/code}<\/p>\n<p>Only list items 1, 2 and 3 above will be styled with a red <a href=\"http:\/\/www.vanseodesign.com\/css\/css-background-property\/\">background<\/a>. Both are children of the ul, while list items 2-1, and 2-2 are grandchildren.<\/p>\n<p><strong>Adjacent sibling combinator E + F<\/strong> (2) &mdash; matches an element F immediately preceded by an element E. Note the word adjacent. Only the first element F after E will be targeted.<\/p>\n<p>{code type=html}<\/p>\n<h1>Heading<\/h1>\n<p>Paragraph 1<\/p>\n<p>Paragraph 2<\/p>\n<p>Paragraph 3<\/p>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\nh1+p {font-size: 1.5em;}<br \/>\n{\/code}<\/p>\n<p>Only paragraph 1 will be <a href=\"http:\/\/www.vanseodesign.com\/css\/thoughts-on-building-a-typographic-stylesheet\/\">styled with the increased font-size<\/a> as it&#8217;s the only paragraph adjacent to the h1.<\/p>\n<p><strong>General sibling combinator E ~ F<\/strong> (3) &mdash; matches an element F preceded by an element E. Unlike the above this will match any sibling and not just the first.<\/p>\n<p>{code type=html}<\/p>\n<h1>Heading<\/h1>\n<p>Paragraph 1<\/p>\n<p>Paragraph 2<\/p>\n<p>Paragraph 3<\/p>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\nh1~p {font-size: 1.5em;}<br \/>\n{\/code}<\/p>\n<p>Here all three paragraphs will have the increased <a href=\"http:\/\/www.vanseodesign.com\/css\/thoughts-on-building-a-typographic-stylesheet\/\">font-size<\/a> as all are preceded by the h1. It isn&#8217;t necessary for the elements to be adjacent in the general sibling combinator.<\/p>\n<h3>Beyond Simple Selectors<\/h3>\n<p>Note that you aren&#8217;t limited to only using simple elemental selectors in <a href=\"http:\/\/css-tricks.com\/5514-child-and-sibling-selectors\/\">combinators<\/a>. Any selector, including attribute selectors can sit on either side of the combinator.<\/p>\n<p>{code type=css}<br \/>\nul a[title]<br \/>\nli#first>a[rel=&#8221;external&#8221;]<br \/>\nh1+p.intro<br \/>\nh2.myclass~p[class=&#8221;intro&#8221;]<br \/>\n{\/code}<\/p>\n<p>All of the above are valid combinators.<\/p>\n<p><a href=\"http:\/\/vantasyartz.deviantart.com\/art\/Classroom-170918130\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/classroom-2.jpg\" alt=\"Illustration of a classroom\" width=\"465\" height=\"349\" \/><\/a><\/p>\n<h2>Pseudo-Class Selectors<\/h2>\n<p>There are a variety of <a href=\"http:\/\/css-tricks.com\/5762-pseudo-class-selectors\/\">pseudo-class selectors<\/a>, one group of which, I&#8217;m sure you use often. Others you may have seen and even used before and some will probably be new to you.<\/p>\n<p>The W3C divides <a href=\"http:\/\/reference.sitepoint.com\/css\/pseudoclasses\">pseudo-classes<\/a> into the following groups:<\/p>\n<ul>\n<li>dynamic pseudo-classes<\/li>\n<li>target pseudo-class<\/li>\n<li>language pseudo-class<\/li>\n<li>UI element pseudo-class<\/li>\n<li>negation pseudo-class<\/li>\n<li>structural pseudo-classes<\/li>\n<\/ul>\n<p>We&#8217;ll cover the first 5 above today and then pick up next week with structural pseudo-classes and another group of selectors, pseudo elements.<\/p>\n<h3>Dynamic Pseudo-Classes<\/h3>\n<p>This is the group I&#8217;m sure you&#8217;re familiar with. It consists of the link and user action pseudo-classes and should look instantly familiar.<\/p>\n<h4>link pseudo-classes (1)<\/h4>\n<p><strong>E:link<\/strong> &mdash;  matches an element E that&#8217;s the source anchor of a hyperlink of which the target is not yet visited.<\/p>\n<p><strong>E:visited<\/strong> &mdash;  matches an element E that&#8217;s the source anchor of a hyperlink of which the target has already been visited.<\/p>\n<h4>user action pseudo-classes (1) and (2)<\/h4>\n<p>These match an element E during certain user actions<\/p>\n<p><strong>E:active<\/strong> &mdash;  When the link is active (in the process of being clicked).<\/p>\n<p><strong>E:hover<\/strong> &mdash; When the visitor hovers over the link.<\/p>\n<p><strong>E:focus<\/strong> &mdash; When the link has active focus.<\/p>\n<p>I&#8217;ll assume you know all of the above well enough that little explanation is necessary.<\/p>\n<p>One tip when using :link, :visited, :hover, and :active on a single element is that they need to come in that order. Remember the expression LoVeHAte.<\/p>\n<h3>Target pseudo-class (3)<\/h3>\n<p>If you&#8217;ve ever created a named anchor by adding a # to a url then you&#8217;ve created a target pseudo-class in your html.<\/p>\n<p><strong>E:target<\/strong> &mdash;  matches an element E that&#8217;s the target (named anchor) of the referring url.<\/p>\n<p>{code type=html}<br \/>\n<a href=\"domain.com\/this-page.html#a-specific-page-location\"><\/a><br \/>\n<span id=\"a-specific-page-location\"><\/span><br \/>\n{\/code}<\/p>\n<p>{code type=css}<br \/>\nspan:target {background: yellow;}<br \/>\n{\/code}<\/p>\n<p>The above would place a yellow background behind the span.<\/p>\n<p>These are good to use to help quickly orient people who&#8217;ve clicked to a specific part of a page from another page or from somewhere else on the same page.<\/p>\n<h3>Lang pseudo-class (2)<\/h3>\n<p><strong>E:lang(fr)<\/strong> &mdash;  matches an element of type E in the language specified (here &#8220;fr&#8221; or French)<\/p>\n<p>{code type=html}<br \/>\n<body lang=fr><\/p>\n<p>Je suis fran&ccedil;ais.<\/p>\n<p><\/body><br \/>\n{\/code}<\/p>\n<p>{code type=css}<br \/>\np:lang(fr) {color: red;}<br \/>\n{\/code}<\/p>\n<p>I&#8217;m not sure how often you use multiple languages on a single page, but if you do here&#8217;s a way to target specific text in a different language.<\/p>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/adactio\/1350143631\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/css-selectors.jpg\" alt=\"CSS selectors\" width=\"465\" height=\"349\" \/><\/a><\/p>\n<h3>UI element states pseudo-classes (3)<\/h3>\n<p>A common trick to <a href=\"http:\/\/www.vanseodesign.com\/web-design\/minimize-errors-part-iii\/\">improve form usability is adding constraints<\/a> like enabling and disabling form items based on what the visitor has already filled out.<\/p>\n<p>Note that by default html elements are neither enabled nor disabled. A scripting language like Javascript is typically used to enable or disable the elements, however you could manually set html attributes on the inputs.<\/p>\n<p><strong>E:enabled<\/strong> &mdash;  matches a user interface element E which is <a href=\"http:\/\/reference.sitepoint.com\/css\/pseudoclass-enabled\">enabled<\/a>.<\/p>\n<p><strong>E:disabled<\/strong> &mdash;  matches a user interface element E which is disabled.<\/p>\n<p><strong>E:checked<\/strong> &mdash;  matches a user interface element E which is checked (radio-button or checkbox).<\/p>\n<p>{code type=html}<\/p>\n<form>\n  Preferred Contact:<br \/>\n    <input type=\"radio\" id=\"prefer\" value=\"email\" checked=\"checked\" \/> Email<br \/>\n    <input type=\"radio\" id=\"prefer\" value=\"phone\" \/> Phone<br \/>\n  Email: <input type=\"text\" id=\"email\" enabled=\"enabled\" \/><br \/>\n  Phone: <input type=\"text\" id=\"phone\" disabled=\"disabled\" \/><br \/>\n<\/form>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\n:enabled {color: green;}<br \/>\n:disabled {color: red;}<br \/>\n:checked {background: yellow;}<br \/>\n{\/code}<\/p>\n<p>Here red and green are used to let visitors quickly determine which form elements are currently available. Checked items are given a yellow background so they stand out as having been checked.<\/p>\n<p>Presumably we&#8217;d use Javascript to change the <a href=\"http:\/\/www.quirksmode.org\/css\/enabled.html\">enabled and disabled<\/a> attributes based on which method is chosen as preferred.<\/p>\n<h3>Negation pseudo-class (3)<\/h3>\n<p>The <a href=\"http:\/\/kilianvalkhof.com\/2008\/css-xhtml\/the-css3-not-selector\/\">negation pseudo-class<\/a> does what you might expect. Adding it selects everything other than the selector being negated.<\/p>\n<p><strong>E:not(S)<\/strong> &mdash; matches an E element that does not match simple selector S.<\/p>\n<p>{code type=html}<\/p>\n<div class=\"one\"><\/div>\n<div class=\"two\"><\/div>\n<div class=\"three\"><\/div>\n<p>{\/code}<\/p>\n<p>{code type=css}<br \/>\ndiv:not(.two) {color: orange;}<br \/>\n{\/code}<\/p>\n<p>The above styles all the text in the first and third divs to be orange, since these two divs do not have a class of two assigned. The negation selector looks simple enough, but it can get quite complex in a hurry.<\/p>\n<p>You&#8217;ll likely be able to find other ways to target the elements you want rather than use the <a href=\"http:\/\/www.quirksmode.org\/css\/not.html\">negation selector<\/a>, however one negation might be able to replace quite a few other selectors and may be more appropriate to use at times.<\/p>\n<h2>Browser Support<\/h2>\n<p>Support for combinators is good once you get past IE6. It&#8217;s not quite as good for pseudo-classes (outside of the dynamic pseudo-classes, which have good support) where we&#8217;re generally looking at IE9 and up for support.<\/p>\n<p>You can check the links below to see the support for any of the specific selectors.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.quirksmode.org\/css\/contents.html\">CSS contents and browser compatibility<\/a><\/li>\n<li><a href=\"http:\/\/dev.l-c-n.com\/CSS3-selectors\/browser-support.php#pC\">pseudo-class support<\/a><\/li>\n<li><a href=\"http:\/\/tools.css3.info\/selectors-test\/test.html\">CSS3 Selectors Test<\/a><\/li>\n<\/ul>\n<p><a href=\"http:\/\/-khameleon-.deviantart.com\/art\/Rainbow-DNA-1753777\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/rainbow-dna.jpg\" alt=\"DNA strands in rainbow colored canisters\" width=\"465\" height=\"349\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>As was the case with <a href=\"http:\/\/www.vanseodesign.com\/css\/attribute-selectors\/\">attribute selectors<\/a> I&#8217;m guessing you&#8217;ve used some of these combinators and pseudo-classes before. I&#8217;m also guessing most of what&#8217;s here you don&#8217;t use. That&#8217;s certainly true for me.<\/p>\n<p>Outside of the generic descendant combinator and the dynamic pseudo-classes, I can&#8217;t say many of these ever find their way into my code. Some like :lang probably won&#8217;t come up that often, but hopefully you can see the benefit of the UI element states, the negation selector, and the other combinators.<\/p>\n<p>Next week I&#8217;ll wrap up this quick walk through of selectors. We&#8217;ll look at the last of the pseudo-classes, the structural pseudo-classes and then look at pseudo-elements. Both will apply to some very practical ways we&#8217;re likely to want to style our pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on attribute selectors. This week I want to continue and talk specifically about combinators before starting to cover pseudo class selectors.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"series":[],"class_list":["post-3313","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design\" \/>\n<meta property=\"og:description\" content=\"Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on attribute selectors. This week I want to continue and talk specifically about combinators before starting to cover pseudo class selectors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"Vanseo Design\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-19T12:30:46+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg\" \/>\n<meta name=\"author\" content=\"Steven Bradley\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Bradley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/\"},\"author\":{\"name\":\"Steven Bradley\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\"},\"headline\":\"How To Use CSS Combinators and Simple Pseudo Class Selectors\",\"datePublished\":\"2011-09-19T12:30:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/\"},\"wordCount\":1359,\"commentCount\":12,\"image\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/combination-lock-3.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/\",\"url\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/\",\"name\":\"How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/combination-lock-3.jpg\",\"datePublished\":\"2011-09-19T12:30:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/combination-lock-3.jpg\",\"contentUrl\":\"http:\\\/\\\/www.vanseodesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2011\\\/09\\\/combination-lock-3.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/combinators-pseudo-classes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vanseodesign.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/vanseodesign.com\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Use CSS Combinators and Simple Pseudo Class Selectors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#website\",\"url\":\"https:\\\/\\\/vanseodesign.com\\\/\",\"name\":\"Vanseo Design\",\"description\":\"Helping you build search engine friendly websites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vanseodesign.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/vanseodesign.com\\\/#\\\/schema\\\/person\\\/470cda6ba835fb52596b2e26bcbd8fe4\",\"name\":\"Steven Bradley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"url\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"contentUrl\":\"\\\/\\\/www.gravatar.com\\\/avatar\\\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png\",\"caption\":\"Steven Bradley\"},\"sameAs\":[\"https:\\\/\\\/www.vanseodesign.com\\\/about\\\/\"],\"url\":\"https:\\\/\\\/vanseodesign.com\\\/author\\\/vangogh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/","og_locale":"en_US","og_type":"article","og_title":"How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design","og_description":"Last week we began looking at some of the selectors we have available for hooking css styles into our html. We briefly touched on some simple selectors and mainly focused on attribute selectors. This week I want to continue and talk specifically about combinators before starting to cover pseudo class selectors.","og_url":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/","og_site_name":"Vanseo Design","article_published_time":"2011-09-19T12:30:46+00:00","og_image":[{"url":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg","type":"","width":"","height":""}],"author":"Steven Bradley","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Steven Bradley","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#article","isPartOf":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/"},"author":{"name":"Steven Bradley","@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4"},"headline":"How To Use CSS Combinators and Simple Pseudo Class Selectors","datePublished":"2011-09-19T12:30:46+00:00","mainEntityOfPage":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/"},"wordCount":1359,"commentCount":12,"image":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/","url":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/","name":"How To Use CSS Combinators and Simple Pseudo Class Selectors - Vanseo Design","isPartOf":{"@id":"https:\/\/vanseodesign.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#primaryimage"},"image":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#primaryimage"},"thumbnailUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg","datePublished":"2011-09-19T12:30:46+00:00","author":{"@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4"},"breadcrumb":{"@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#primaryimage","url":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg","contentUrl":"http:\/\/www.vanseodesign.com\/blog\/wp-content\/uploads\/2011\/09\/combination-lock-3.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/vanseodesign.com\/css\/combinators-pseudo-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vanseodesign.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/vanseodesign.com\/css\/"},{"@type":"ListItem","position":3,"name":"How To Use CSS Combinators and Simple Pseudo Class Selectors"}]},{"@type":"WebSite","@id":"https:\/\/vanseodesign.com\/#website","url":"https:\/\/vanseodesign.com\/","name":"Vanseo Design","description":"Helping you build search engine friendly websites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vanseodesign.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/vanseodesign.com\/#\/schema\/person\/470cda6ba835fb52596b2e26bcbd8fe4","name":"Steven Bradley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","url":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","contentUrl":"\/\/www.gravatar.com\/avatar\/0f47bf400c3c1bafe06ee2884405baaa?s=96&#038;r=pg&#038;d=https%3A%2F%2Fvanseodesign.com%2Fblog%2Fwp-content%2Fthemes%2Fvanseo-design%2Fimages%2Fgravatar.png","caption":"Steven Bradley"},"sameAs":["https:\/\/www.vanseodesign.com\/about\/"],"url":"https:\/\/vanseodesign.com\/author\/vangogh\/"}]}},"_links":{"self":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts\/3313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/comments?post=3313"}],"version-history":[{"count":0,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/posts\/3313\/revisions"}],"wp:attachment":[{"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/media?parent=3313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/categories?post=3313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/tags?post=3313"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/vanseodesign.com\/wp-json\/wp\/v2\/series?post=3313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}