CSS is a vast ocean of possibilities. There are dozen different ways to accomplish the look/feel of a design. Lost in this sea of colors, fonts, and positions are a few under-used and under-appreciated selectors. Today we’re going to batch 3 of my 3 favorites. See part 1 here where we covered the immediate sibling selector and part 2 here where we touched on attribute selectors and :before and :after content.
*We’re making the assumption that we are all now using modern web browsers with the latest CSS specs.
2. Last-Child Selector
A pretty powerful tool for css styling is being able to target the very last element in a hierarchy:
.wysiwyg p { margin-bottom:20px; }
.wysiwyg p:last-child { margin-bottom:0 }
What this does is it says “get me the very last child whose parent has the wysiwyg class”. It only looks for immediate last-children so nested children won’t be counted. It is also commonly mistaken that it will get the last instance of an element. This is not true. It will only grab the :last-child element if it is absolutely the very last child of the parent. So in this markup, the last “p” tag will have a margin-bottom of 0:
<div class="wysiwyg"> <p>Hello World</p> <h3>Check out this Header tag</h3> <div class="testimonial">This is a great blog post</div> <p>In conclusion, Nick is very good at Web Development</p> </div>
The last paragraph tag is immediately before the closing .wysiwyg tag. This triggers the :last-child selector.
Conversely, the last p tag in this markup will NOT get targeted:
<div class="wysiwyg"> <p>Hello World</p> <h3>Check out this Header tag</h3> <div class="testimonial">This is a great blog post</div> <p>In conclusion, Nick is very good at Web Development</p> <span class="hidden"></span> </div>
Even if that last span tag is completely hidden or display:none, it still negates the p:last-child selector because the paragraph tag is not the very last child of .wysiwyg.
The best practical application that I use this for on most of my projects to styling out text tags meant for wysiwg editors. Typically there is typography to follow with nicely spaced paragraphs, header tags, lists, etc – but when you get to the end you don’t usually want the extra space that the margins create. so in most of my project stylesheets you can find something like:
.wysiwyg p,
.wysiwyg ul, .wysiwyg ol { margin-bottom:20px; }
.wysiwyg h1, .wysiwyg h2
.wysiwyg h3, .wysiwyg h4
.wysiwyg h5, .wysiwyg h6 { margin-bottom:35px; }
.wysiwyg p:last-child,
.wysiwyg ol:last-child,
.wysiwyg ul:last-child,
.wysiwyg h1:last-child,
.wysiwyg h2:last-child,
.wysiwyg h3:last-child,
.wysiwyg h5:last-child,
.wysiwyg h6:last-child { margin-bottom:0; }
Or if you’re using LESS or SASS like you should be:
p, ul, ol { margin-bottom:20px; }
h1, h2, h3, h4, h5, h6 { margin-bottom:35px; }
.wysiwyg {
p, ul, ol, h1, h2, h3, h4, h5, h6 { margin-bottom:0; }
}
3. Placeholders
Input and Select elements are notoriously hard to style. You can’t access the :before or :after pseudo element so you lose a lot of flexibility. Each browser basically has a different set of default styles for them too so it’s a constant battle to make it look uniform throughout. One thing you can change, though, is a few basic properties of the placeholder. At the time of this post the following properties can be manipulated:
- font manipulation ( weight, size, style, etc )
- color
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- opacity
Styling your placeholders can add an extra level of “pizzaz” and also help distinguish between a placeholder and actual inputted text. The correct, cross browser syntax is:
::-webkit-input-placeholder { color:#f2f2f2; font-style:italic; }
:-ms-input-placeholder { color:#f2f2f2; font-style:italic; }
::-ms-input-placeholder { color:#f2f2f2; font-style:italic; }
::placeholder { color:#f2f2f2; font-style:italic; }
That concludes our 3 part series of under-used and under-appreciated CSS Selectors. Be on the look out for another multi-part series coming soon!
