{"id":443,"date":"2011-11-27T22:54:26","date_gmt":"2011-11-27T22:54:26","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=443"},"modified":"2011-11-27T22:54:26","modified_gmt":"2011-11-27T22:54:26","slug":"first-child-pseudo-class-limitations","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/first-child-pseudo-class-limitations\/","title":{"rendered":"Overcoming first-child pseudo-class limitations"},"content":{"rendered":"<p>The <em>:first-child<\/em> CSS pseudo-class is one of the most useful &quot;pseudos&quot; in the CSS spec, allowing us to select the first child element within a parent element. However, against intuition, if you prefix the <a href=\"http:\/\/www.w3schools.com\/cssref\/sel_firstchild.asp\">first-child<\/a> pseudo-class with an element type, it simply ignores it.<\/p>\n<p>Example:<\/p>\n<p><code>&lt;div&gt;<br \/>\n\t&nbsp; &lt;h3&gt;SubHeading&lt;\/h3&gt;<br \/>\n\t&nbsp; &lt;p&gt;Paragraph&lt;\/p&gt;<br \/>\n\t&nbsp; &lt;p&gt;Paragraph&lt;\/p&gt;<br \/>\n\t&nbsp; &lt;p&gt;Paragraph&lt;\/p&gt;<br \/>\n\t&lt;\/div&gt;<\/code><\/p>\n<p><code>div p:first-child { \/* does not select any element above *\/ }<br \/>\n\tdiv :first-child { \/* selects the &lt;h3&gt; element *\/ }<br \/>\n\t<\/code><\/p>\n<p>But, what if we want to style the first &lt;p&gt; element without adding any class attributes to the markup? With a little extra CSS, we can actually keep our markup cleaner. If we wanted to create a 3 column layout with the paragraphs above, the CSS would be quite simple if we did not have the &lt;h3&gt; heading preventing us from using the <em>first-child<\/em> pseudo-class to remove the left margin from the first &lt;p&gt;:<\/p>\n<p><code>div p { margin-left: 10px; }<br \/>\n\tdiv p:first-child { margin-left: 0; }<br \/>\n\t<\/code><\/p>\n<p>But, the same can be achieved with little extra effort, even in the presence of the subheading &lt;h3&gt;. It actually might even be more elegant than the above:<\/p>\n<p><code>div p { float: left; }<br \/>\n\tdiv p + p { margin-left: 10px; }<br \/>\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The :first-child CSS pseudo-class is one of the most useful &quot;pseudos&quot; in the CSS spec, allowing us to select the first child element within a&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/443"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions\/444"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}