{"id":3016,"date":"2011-11-13T06:51:52","date_gmt":"2011-11-13T11:51:52","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=3016"},"modified":"2016-03-30T14:59:56","modified_gmt":"2016-03-30T18:59:56","slug":"css3-combinators","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2011\/11\/13\/css3-combinators\/","title":{"rendered":"CSS3 Combinators"},"content":{"rendered":"

In my previous article on CSS3 Selectors, I discussed the two Attribute Selector<\/em> classifications; Attribute Presence and Value Selectors<\/a>, and, Attribute Substring Matching Selectors<\/a>.<\/p>\n

In addition to the new Attribute Selectors, the CSS3 Selectors Module<\/a> defines a new Combinator<\/em> called the General sibling combinator<\/strong>, which is described below, succeeding a review of each CSS3 Combinator<\/em>.<\/p>\n

\n

Combinators<\/h2>\n

Combinators provide a means for describing relationships between elements in order to “combine” them to form specific rules based on a simple syntax. There are four Combinators in CSS3, below is description and example of each:<\/p>\n

\n
\n
Descendant combinator<\/dt>\n
The most familiar of all Combinators, the Descendant combinator<\/em> allows for selecting any element f<\/em> which is a descendant (child, grandchild, great-grandchild and so on) of an element e<\/em>. The combinator syntax for a Descendant combinator is a single “white-space” character.<\/p>\n
\r\n\/* \r\n Matches all 
 elements which are descendants of \r\n an 
 element \r\n *\/\r\narticle h1{\r\n  \/* declarations *\/\r\n} \r\n<\/pre>\n
8.1. Descendant combinator<\/a>
\n\n<\/dd>\n
Child combinators<\/dt>\n
Child combinators<\/em> allow for selecting any element f<\/em> which is a direct child of an element e<\/em>. The combinator syntax for a Child combinator<\/em> is a single “greater-than” (>) sign.<\/p>\n
\r\n\/* \r\n Matches each 
 element that is a child \r\n of an 
 element \r\n *\/\r\narticle > section {\r\n  \/* declarations *\/\r\n} \r\n<\/pre>\n
8.2. Child combinator<\/a>
\n\n<\/dd>\n
Adjacent sibling combinator<\/dt>\n
The Adjacent sibling combinator<\/em> is a Sibling combinator<\/em> which allows for selecting an element f<\/em> which is adjacent to an element e<\/em>; that is, element f<\/em> immediately follows element e<\/em> in the document tree. The combinator syntax for an Adjacent sibling combinator<\/em> is a single “plus” (+) sign.<\/p>\n
\r\n\/* \r\n Matches all  elements which are the next sibling \r\n of a  element \r\n *\/\r\nstrong + em {\r\n  \/* declarations *\/\r\n} \r\n<\/pre>\n
8.3.1. Adjacent sibling combinator<\/a>
\n\n<\/dd>\n
General sibling combinator<\/dt>\n
New in CSS3, the General sibling combinator<\/em> is similar to the Adjacent sibling combinator<\/em> in that it matches an element f<\/em> which follows an element e<\/em> in the document tree; however, whereas in the Adjacent sibling combinator<\/em> element f<\/em> must immediately follow element e<\/em>, the General sibling combinator<\/em> allows for selecting an element f<\/em> which is preceded by an element e<\/em>, but not necessarily immediately preceded by an element e<\/em>. The combinator syntax for a General sibling combinator<\/em> is a single “tilde” (~) sign.<\/p>\n
\r\n\/* \r\n Matches all 
8.3.2. General sibling combinator<\/a>
\n\n<\/dd>\n<\/dl>\n
The following demonstrates a very basic example of each of the above Combinators:
\nView Example<\/a>\n<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
In my previous article on CSS3 Selectors, I discussed the two Attribute Selector classifications; Attribute Presence and Value Selectors, and, Attribute Substring Matching Selectors. In addition to the new Attribute Selectors, the CSS3 Selectors Module defines a new Combinator called the General sibling combinator, which is described below, succeeding a review of each CSS3 Combinator. Combinators Combinators provide a means… Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[133,62,59,78],"tags":[166,66,165,161,65,167],"class_list":["post-3016","post","type-post","status-publish","format-standard","hentry","category-browsers","category-css3","category-html5","category-javascript-2","tag-browsers-2","tag-css3-2","tag-css3-combinators","tag-css3-selectors","tag-html5-2","tag-selectors"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=3016"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3016\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=3016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=3016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=3016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}