When creating a selector, if you add a space after the first selector it will then select all children that match the second selector you specify.<\/p>\n
<\/iframe><\/p>\n<h2>Select immediate children<\/h2>\n<p>Selecting only immediate children is done with the <strong>>\u00a0<\/strong>character between two selectors<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-selectors-2\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/YLGgRr?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=YLGgRr#?secret=qmJzl777tk\" data-secret=\"qmJzl777tk\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Selecting multiple selectors<\/h2>\n<p>To select multiple selectors you use the\u00a0<strong>,\u00a0<\/strong>character between each selector.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-selectors-3\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/GdjeLd?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=GdjeLd#?secret=miQte5CTCD\" data-secret=\"miQte5CTCD\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Selecting multiple elements with one class<\/h2>\n<p>Very often we want to apply the same styling to a number of elements, instead of selecting multiple selectors we just add a new class to each element we want to be selected.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-selectors-4\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/QrKoRR?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=QrKoRR#?secret=r6zCwEqqOn\" data-secret=\"r6zCwEqqOn\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Colors and Sizes<\/h2>\n<p>We’ll set a global font-size and then based on it we’ll adjust different font sizes and spacing. We’ll also apply some transparent colors and text colors.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-sizes-colors\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/NMRmKm?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=NMRmKm#?secret=glBtJy9e6n\" data-secret=\"glBtJy9e6n\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Pseudo Elements<\/h2>\n<p>We’ll need to apply a hover effect by using the :hover pseudo element. We’ll also need to select the first, third, and last .child element of .parent by using the :first-of-type, :nth-of-type, and :last-of-type pseudo selectors.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-pseudo-elements\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/rvMbxL?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=rvMbxL#?secret=s2lQPZoGly\" data-secret=\"s2lQPZoGly\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Using LESS<\/h2>\n<p>We’ll use the main abilities of LESS by adding a selector inside an element that selects that element and adds a pseudo :hover selector. Then we’ll apply a style to a child of .parent by using the nesting properties of LESS and apply a variable form LESS.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"ex-less\" src=\"https:\/\/codepen.io\/agrublev\/embed\/preview\/MGjRJy?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MGjRJy#?secret=vUduOgaKI6\" data-secret=\"vUduOgaKI6\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selecting all matching children When creating a selector, if you add a space after the first selector it will then select all children that match the second selector you specify. Select immediate children Selecting only immediate children is done with the >\u00a0character between two selectors Selecting multiple selectors To select multiple selectors you use the\u00a0,\u00a0character […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=178"}],"version-history":[{"count":2,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":180,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions\/180"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}