A child combinator in CSS is the “greater than” symbol, it looks like this:<\/p>\n
ol > li {\r\n color: red;\r\n}<\/code><\/pre>\nIt means “select elements that are direct descendants only”. In this case: “select list items that are direct descendants of an ordered list”. To illustrate:<\/p>\n
<ol>\r\n <li>WILL be selected<\/li>\r\n <li>WILL be selected<\/li>\r\n <ul>\r\n <li>Will NOT be selected<\/li>\r\n <li>Will NOT be selected<\/li>\r\n <\/ul>\r\n <li>WILL be selected<\/li>\r\n<\/ol><\/code><\/pre>\nTry removing the ><\/code> symbol when playing around with the demo below:<\/p>\nSee the Pen f149edb15c53d157a7009b816ee919d2<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\nMore Information<\/h3>\n\n- Article about child and sibling selectors.<\/a><\/li>\n
- MDN Docs<\/a><\/li>\n<\/ul>\n
Also Known As…<\/h3>\n
The child combinator is what the spec calls it, but you’ll also hear it called:<\/p>\n
\n- child selector<\/li>\n
- direct descendent selector<\/li>\n
- direct descendant combinator<\/li>\n<\/ul>\n
Browser Support<\/h3>\n
\n\n\nChrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n\nAny<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n 7+<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"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: <ol> <li>WILL be selected<\/li> <li>WILL be selected<\/li> <ul> <li>Will […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14160,"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":181092,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/s\/selection\/","url_meta":{"origin":14162,"position":0},"title":"::selection","date":"August 29, 2014","format":false,"excerpt":"Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme. p::selection {\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?fit=1200%2C399&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14162,"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":14230,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\/","url_meta":{"origin":14162,"position":2},"title":":nth-child","date":"September 6, 2011","format":false,"excerpt":"The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. \/* Select the first list item *\/ li:nth-child(1) { } \/* Select the 5th list item *\/ li:nth-child(5) { } \/* Select every other list item starting with first *\/\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196786,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","url_meta":{"origin":14162,"position":3},"title":"text-align-last","date":"February 26, 2015","format":false,"excerpt":"text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break \u2014 for example the end of a paragraph or the line right before a tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":14162,"position":4},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14232,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-last-child\/","url_meta":{"origin":14162,"position":5},"title":":nth-last-child","date":"September 6, 2011","format":false,"excerpt":"The :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a \u201cstructural pseudo-class\u201d, meaning it is used to style content based on its relationship with parent and sibling elements. It\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\/14162"}],"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=14162"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14162\/revisions"}],"predecessor-version":[{"id":236731,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14162\/revisions\/236731"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14160"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14162"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}