{"id":262,"date":"2011-04-23T21:46:36","date_gmt":"2011-04-23T21:46:36","guid":{"rendered":"http:\/\/www.codeboss.in\/web-funda\/?p=262"},"modified":"2011-04-23T21:46:36","modified_gmt":"2011-04-23T21:46:36","slug":"nested-css","status":"publish","type":"post","link":"https:\/\/codeboss.in\/web-funda\/2011\/04\/23\/nested-css\/","title":{"rendered":"Nested CSS"},"content":{"rendered":"<p>We sometimes need to give the same class different visual. Also sometimes a certain element can have different style depending on its placement. These can be achieved by using nested CSS.<\/p>\n<p>Lets clear it with a few example &#8211;<\/p>\n<pre class=\"brush:html;\">\n.abc{ float:left; }\n.xyz .abc{ float:none;}\n<\/pre>\n<p>In the above example class abc will have float:left.<br \/>\nBut when an element with class abc is within an element with class xyz it will not follow float:left<\/p>\n<pre class=\"brush:html;\">\np{ font-weight:bold; }\n.abc p{ font-weight:normal;}\n<\/pre>\n<p>In the above example the text within <strong>p<\/strong> tag will always be bold, unless the <strong>p<\/strong> tag is within an element with class abc<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We sometimes need to give the same class different visual. Also sometimes a certain element can have different style depending on its placement. These can be achieved by using nested CSS. Lets clear it with a few example &#8211; .abc{ float:left; } .xyz .abc{ float:none;} In the above example class abc will have float:left. But&hellip; <a class=\"more-link\" href=\"https:\/\/codeboss.in\/web-funda\/2011\/04\/23\/nested-css\/\">Continue reading <span class=\"screen-reader-text\">Nested CSS<\/span><\/a><\/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":[36],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","entry"],"_links":{"self":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":0,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"wp:attachment":[{"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeboss.in\/web-funda\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}