{"id":137015,"date":"2024-10-11T14:55:11","date_gmt":"2024-10-11T09:25:11","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137015"},"modified":"2024-10-16T14:48:49","modified_gmt":"2024-10-16T09:18:49","slug":"css-structural-pseudo-classes-css-selectors-typography-and-more","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/","title":{"rendered":"CSS structural pseudo-classes | CSS Selectors, Typography and More"},"content":{"rendered":"\n<p>Structural pseudo-classes allow you to target elements based on their position within the document structure. They can be useful for creating responsive layouts and applying specific styles to elements based on their context.<\/p>\n\n\n\n<p><strong>Common Structural Pseudo-Classes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>:root:<\/strong> Targets the root element of the document (usually the &lt;html&gt; element).<\/li>\n\n\n\n<li><strong>:first-child:<\/strong> Targets the first child element of its parent.<\/li>\n\n\n\n<li><strong>:last-child:<\/strong> Targets the last child element of its parent.<\/li>\n\n\n\n<li><strong>:nth-child(n):<\/strong> Targets the nth child element of its parent, where n is a number.<\/li>\n\n\n\n<li><strong>:nth-of-type(n):<\/strong> Targets the nth element of its type within its parent.<\/li>\n\n\n\n<li><strong>:only-child:<\/strong> Targets an element that is the only child of its parent.<\/li>\n\n\n\n<li><strong>:first-of-type:<\/strong> Targets the first element of its type within its parent.<\/li>\n\n\n\n<li><strong>:last-of-type:<\/strong> Targets the last element of its type within its parent.<\/li>\n\n\n\n<li><strong>:only-of-type:<\/strong> Targets an element that is the only element of its type within its parent.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 1&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 2&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 3&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/div&gt;<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>.container:first-child&nbsp;<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>&nbsp; background-color: #f0f0f0;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.item:nth-child(odd) {<\/p>\n\n\n\n<p>&nbsp; background-color: #eee;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.item:last-of-type {<\/p>\n\n\n\n<p>&nbsp; font-weight: bold;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Using Structural Pseudo-Classes in Responsive Design<\/strong><\/p>\n\n\n\n<p>Structural pseudo-classes can be combined with media queries to create responsive layouts. For example, you can use :nth-of-type to target specific elements within a grid layout based on their position.<\/p>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<p>@media only screen and (max-width: 600px) {<\/p>\n\n\n\n<p>&nbsp; .container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; display: flex;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; flex-direction: column;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>&nbsp; .item:nth-of-type(1) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; background-color: #f0f0f0;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>} Structural pseudo-classes provide a powerful way to target elements based on their position within the document structure. By understanding and effectively using these selectors, you can create more targeted and responsive stylesheets for your web designs.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-selectors-beyond-the-normal-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/nth-based-selection-in-responsive-web-designs-css-selectors-typography-and-more\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Structural pseudo-classes allow you to target elements based on their position within the document structure. They can be useful for creating responsive layouts and applying specific styles to elements based on their context. Common Structural Pseudo-Classes Example HTML &lt;div class=&#8221;container&#8221;&gt; &nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 1&lt;\/div&gt; &nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 2&lt;\/div&gt; &nbsp; &lt;div class=&#8221;item&#8221;&gt;Item 3&lt;\/div&gt; &lt;\/div&gt; CSS .container:first-child&nbsp;&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137015","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial<\/title>\n<meta name=\"description\" content=\"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T09:18:49+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/\",\"name\":\"CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-11T09:25:11+00:00\",\"dateModified\":\"2024-10-16T09:18:49+00:00\",\"description\":\"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS structural pseudo-classes | CSS Selectors, Typography and More\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial","description":"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!","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:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/","og_locale":"en_US","og_type":"article","og_title":"CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial","og_description":"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T09:18:49+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/","name":"CSS structural pseudo-classes | CSS Selectors, Typography and More - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-11T09:25:11+00:00","dateModified":"2024-10-16T09:18:49+00:00","description":"Boost your knowledge and prepare for the Certified Responsive Web Design Exam with the latest materials. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-structural-pseudo-classes-css-selectors-typography-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS structural pseudo-classes | CSS Selectors, Typography and More"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137015"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137015\/revisions"}],"predecessor-version":[{"id":137349,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137015\/revisions\/137349"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}