{"id":14170,"date":"2011-09-06T19:54:54","date_gmt":"2011-09-07T02:54:54","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14170"},"modified":"2018-02-19T07:15:31","modified_gmt":"2018-02-19T14:15:31","slug":"descendant","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/descendant\/","title":{"rendered":"Descendant"},"content":{"rendered":"

A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here’s some examples:<\/p>\n

ul li {  }\r\nheader h2  {  }\r\nfooter a  {  }\r\n.module div {  }\r\n#info-toggle span  {  }\r\ndiv dl dt a  {  }<\/code><\/pre>\n
Take ul li {  }<\/code> for example. It means “any list item that is a descendant of an unordered list.”<\/em><\/p>\n
Descendant means anywhere nested within it in the DOM tree. Could be a direct child, could be five levels deep, it is still a descendant. This is different than a child combinator<\/a> (>) which requires the element to be the next nested level down. <\/p>\n
To illustrate, div span {  }<\/code> will match:<\/p>\n
<div>\r\n  <span>I will match<\/span>\r\n  <ul>\r\n    <li>\r\n       <span>I will match too<\/span>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div><\/code><\/pre>\n
You probably shouldn’t worry about it very much, but the decedent selector is pretty “expensive” – meaning hard\/slow for rendering engines to figure out and do stuff with. MDN:<\/a><\/p>\n
The descendant selector is the most expensive selector in CSS. It is dreadfully expensive\u2014especially if the selector is in the Tag or Universal Category.<\/p><\/blockquote>\n
But only in comparison to other selectors. It’s still blazingly fast and you’ll probably never notice it unless you go crazy.<\/p>\n
Browser Support<\/h3>\n\n\n\n\n\n
Chrome<\/span><\/th>\nSafari<\/span><\/th>\nFirefox<\/span><\/th>\nOpera<\/span><\/th>\nIE<\/span><\/th>\nAndroid<\/span><\/th>\niOS<\/span><\/th>\n<\/tr>\n<\/thead>\n
Any<\/td>\nAny<\/td>\nAny<\/td>\nAny<\/td>\nAny<\/td>\nAny<\/td>\nAny<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
A descendant selector in CSS is any selector with white space between two selectors without a combinator. Here’s some examples: ul li { } header h2 { } footer a { } .module div { } #info-toggle span { } div dl dt a { } Take ul li { } for example. It means […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14168,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14162,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/child\/","url_meta":{"origin":14170,"position":0},"title":"Child","date":"September 6, 2011","format":false,"excerpt":"A child combinator in CSS is the \"greater than\" symbol, it looks like this: ol > li { color: red; } It means \"select elements that are direct descendants only\". In this case: \"select list items that are direct descendants of an ordered list\". To illustrate: WILL be selected WILL\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14170,"position":1},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263984,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/is\/","url_meta":{"origin":14170,"position":2},"title":":is","date":"December 21, 2017","format":false,"excerpt":"The pseudo-select :is() in CSS allows you to write compound selectors more tersely. For example, rather than writing: ul li, ol li {} We could write: :is(ul, ol) li {} This can make quick work of otherwise extremely verbose, complex, and error prone selectors. See: :is(section, article, aside, nav) :is(h1,\u2026","rel":"","context":"In \":is\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14196,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/g\/general-sibling\/","url_meta":{"origin":14170,"position":3},"title":"General sibling","date":"September 6, 2011","format":false,"excerpt":"The general sibling combinator (~) in CSS looks like this in use: .featured-image ~ p { font-size: 90%; } In that example, you would be selecting all paragraphs in an article that come after the featured image (an element with a class name of \"featured-image\") and making them of slightly\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":14170,"position":4},"title":":not","date":"September 6, 2011","format":false,"excerpt":"The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors. The ability to use a\u2026","rel":"","context":"In \":not\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/not-slide.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14220,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/lang\/","url_meta":{"origin":14170,"position":5},"title":":lang()","date":"September 6, 2011","format":false,"excerpt":"The :lang() pseudo class selector in CSS matches elements based on the context of their given language attribute. Language in HTML, is determined by a combination of the lang=\"\" attribute, the element, and by information from the protocol such as the HTTP Accept-Language request-header1 field. Acceptable language-code strings are specified\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14170"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14170"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14170\/revisions"}],"predecessor-version":[{"id":267248,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14170\/revisions\/267248"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14168"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14170"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}