color: #600; }
The button text is now red!
:CHECKED
The third pseudo-class here is :checked, which deals with the state of an 
element such as a checkbox or radio button. Again, this is very useful for 
giving feedback on what users have selected. For example:
input[type=radio]:checked {
font-weight: bold; }
iPhone Form Example
As a flourish, we can use CSS to highlight the text next to each radio button 
once the button has been pressed:
input:checked + label {
text-shadow: 0 0 6px #fff; }
We first select any input that has been checked, and then we look for the 
very next <span> element that contains our text. Highlighting the text with a 
simple text-shadow is an effective way to provide user feedback.
4. Negation Pseudo-Class
:NOT
This is another of my favorites, because it selects everything except the 
element you specify. For example:
:not(footer) { … }
Smashing eBook #19│Mastering CSS3│ 141
Pdf fillable forms - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
convert word form to pdf fillable form; change font pdf fillable form
Pdf fillable forms - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
pdf add signature field; create a pdf form that can be filled out
This selects everything on the page that is not a footer element. When used 
with form inputs, they allow us to get a little sneakier:
input:not([type=submit]) { … }
input:not(disabled) { … }
The first line selects every form input that’s not a “Submit” button, which is 
useful for styling forms. The second selects all input elements that are not 
enabled; again useful for giving feedback on how to fill in a form.
iPhone User Example
You’ve already seen the :not selector in action. It’s particularly powerful 
when chained with other CSS3 pseudo-selectors. Let’s take a closer look at 
one example:
fieldset input:not([type=radio]) {
margin: 0;
width: 290px;
font-size: 18px;
border-radius: 0;
border-bottom: 0;
border-color: #999;
padding: 8px 10px;}
Here we are selecting all inputs inside fieldset elements that are not radio 
buttons. This is incredibly useful when styling forms because you will often 
want to style text inputs different from select boxes, radio buttons and 
“Submit” buttons.
Smashing eBook #19│Mastering CSS3│ 142
C# Create PDF Library SDK to convert PDF from other file formats
Free PDF creator SDK for Visual Studio .NET. Batch create adobe PDF from multiple forms. Create fillable PDF document with fields.
convert pdf to fillable form; allow users to attach to pdf form
C# PDF Field Edit Library: insert, delete, update pdf form field
provide best ways to create PDF forms and delete PDF forms in C#.NET framework project. A professional PDF form creator supports to create fillable PDF form in
adding a signature to a pdf form; convert pdf to fillable pdf form
What’s Old Is New Again
Let’s go back to the beginning of our story and the humble a:link. HTML5 
arrived on the scene recently and brought with it an exciting change to the 
<a> element that gives the CSS3 pseudo-selector an additive effect.
An <a> element can now be wrapped around block-level elements, turning 
whole sections of your page into links (as long as those sections don’t 
contain other interactive elements). Whereas JavaScript was once popular 
for making entire <div> elements clickable, you can now do so by 
wrapping sections in <a> tags, like so:
<a href="http://www.smashing-magazine.com">
<div id="advert">
<hgroup>
<h1>Jackson’s Widgets</h1>
<h2>The finest widgets in Kentucky</h2>
</hgroup>
<p>Buy Jackson’s Widgets today,
and be sure of a trouble-free life for you,
your widget and your machinery.
Trusted and sold since 1896.</p>
</div>
</a>
The implication for CSS pseudo-selectors is that you can now style a <div> 
based on whether it is being hovered over (a:hove
r
) or is active 
(a:active), like so:
a:hover #advert {
background-color: #f7f7f7; }
Anything that decreases JavaScript and increases semantic code has to be 
good!
Smashing eBook #19│Mastering CSS3│ 143
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
An advanced .NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual C# .NET. Online source code for C#.NET class.
convert an existing form into a fillable pdf; create a pdf form that can be filled out
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Export PDF document from OpenOffice Presentation. Turn ODT, ODS, ODP forms into fillable PDF formats. Quick integrate online source code to VB.NET class project
create fillable pdf form from word; convert pdf to fill in form
Cross-Browser Compatibility
You had to ask, didn’t you! Unbelievably, Internet Explorer 8 (and earlier) 
doesn’t support any of these selectors, whereas the latest versions of 
Chrome, Opera, Safari and Firefox all do. Before your blood boils, consider 
the following solutions.
INTERNET EXPLORER 9
Unless you’ve been living under a rock for the last week, you’ll have heard 
that Microsoft unleashed its latest browser on an unsuspecting public. The 
good thing is, it’s actually quite good. While I don’t expect people who are 
reading this article to change their browsing habits, it’s worth remembering 
that the majority of the world uses IE; and thanks to Windows Update and a 
global marketing campaign, we can hope to see IE9 as the dominant 
Windows browser in the near future. That’s good for Web designers, and it’s 
good for pseudo-selectors. But what about IE8 and its ancestors?
Smashing eBook #19│Mastering CSS3│ 144
VB.NET Create PDF Library SDK to convert PDF from other file
Batch create adobe PDF document from multiple forms in VB.NET. Create fillable PDF document with fields in Visual Basic .NET application.
create a fillable pdf form online; auto fill pdf form fields
C# PDF Text Box Edit Library: add, delete, update PDF text box in
Able to create a fillable and editable text box to PDF Since RasterEdge XDoc.PDF SDK is based on .NET framework ASP.NET web service and Windows Forms for any
change font size pdf fillable form; convert excel to fillable pdf form
Internet Explorer 9 is here.
JAVASCRIPT
Our old friend JavaScript comes to the rescue. I particularly like Selectivizr 
by Keith Clark. Keith has put together a lovely script that, in combination with 
your JavaScript library of choice, adds CSS3 pseudo-class selector 
functionality for earlier versions of IE. Be warned that some libraries fare 
better than others: if you’re using MooTools with Selectivizr, then all the 
pseudo-classes will be available, but if you’re relying on jQuery to do the 
heavy lifting, then a number of the selectors won’t work at all.
Smashing eBook #19│Mastering CSS3│ 145
Selectivizr.
Keith recently released a jQuery plug-in that extends jQuery to include 
support for the following CSS3 pseudo-class selectors:
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type
• :nth-last-of-type
Smashing eBook #19│Mastering CSS3│ 146
It’s also worth looking at the ubiquitous ie7.js script (and its successors) by 
Dean Edwards. This script solves a number of IE-related problems, including 
CSS3 pseudo-selectors.
SO, SHOULD WE START USING CSS3 PSEUDO-SELECTORS TODAY?
I guess the answer to that question depends on how you view JavaScript. 
It’s true that pseudo-selectors can be completely replaced with classes and 
IDs; but it’s also true that, when styling complex layouts, pseudo-selectors 
are both incredibly useful and the natural next step for your CSS. If you find 
that they improve the readability of your CSS and reduce the need for (non-
semantic) classes in your HTML, then it I’d definitely recommend embracing 
them today.
You could use two selectors and fall back on a class name, but that would 
just duplicate work. It also means that you wouldn’t need the pseudo-
classes in the first place. But if you did choose to go down this path, the 
code might look something like this:
li:nth-of-type(3),
li.third { … }
Smashing eBook #19│Mastering CSS3│ 147
This method is not as flexible as using pseudo-classes because you have to 
keep updating the HTML and CSS when the page content changes.
If a lot of your users don’t have JavaScript enabled, that puts you in a bit of a 
bind. Many Web designers argue that functionality (i.e. JavaScript) is 
different from layout (i.e. CSS), and so you should not rely on JavaScript to 
make pseudo-selectors work in IE8 and earlier.
While I agree with the principle, in practice I believe that providing the best 
possible experience to 99% of your users is better than accounting for the 
remaining 1% (or however big your non-JavaScript base may be).
Follow your website’s analytics, and be prepared to make decisions that 
improve your skills as a Web designer and, more importantly, provide the 
best experience possible to the majority of users.
Final oughts
It’s hard not to be depressed by IE8’s complete lack of support for pseudo-
classes. Arguably, having the browser calculate and recalculate page styles 
in this fashion will have implications for rendering speed; but because all 
other major browsers now support these selectors, it’s frustrating that most 
of our users can’t benefit from them without a JavaScript hack.
But as Professor Farnsworth says, “Good news everyone!” Breaking on the 
horizon is the dawn of Internet Explorer 9, and Microsoft has made sure that 
its new browser supports each and every one of the selectors discussed in 
this article.
Smashing eBook #19│Mastering CSS3│ 148
CSS3 pseudo-selectors won’t likely take up large chunks of your style 
sheets. They are specific yet dynamic and are more likely, at least initially, to 
add finishing touches to a page than to set an overall style. Perhaps you 
want to drop the bottom border in the last item of a list, or give visual 
feedback to users as they fill in a form. This is all possible with CSS3, and as 
usage becomes more mainstream, I expect these will become a regular part 
of the Web designer’s toolbox.
If you’ve seen any interesting or exciting uses of these selectors out there in 
the field, do let us know in the comments below.
OTHER RESOURCES
You may be interested in the following articles and related resources:
• The Official CSS3 Selectors Proposed Recommendation
Everything you need to know, from the folks in charge.
• Wikipedia’s Guide to Cascading Style Sheets
A good background read, and the bibliography is a great resource.
• How nth-child Works
A comprehensive guide from the ever-reliable Chris Coyier.
• Internet Explorer 9
If you haven’t yet played around with Redmond’s latest offering, you’re 
in for a pleasant surprise.
Smashing eBook #19│Mastering CSS3│ 149
CSS3 Flexible Box Layout Explained
Richard Shepherd
The flexible box layout module — or “flexbox,” to use its popular nickname 
— is an interesting part of the W3C Working Draft. The flexbox specification 
is still a draft and subject to change, so keep your eyes on the W3C, but it is 
part of a new arsenal of properties that will revolutionize how we lay out 
pages. At least it will be when cross-browser support catches up.
In the meantime, we can experiment with flexbox and even use it on 
production websites where fallbacks will still render the page correctly. It 
may be a little while until we consider it as mainstream as, say, border-
radius, but our job is to investigate new technologies and use them where 
possible. That said, when it comes to something as fundamental as page 
layout, we need to tread carefully.
e Display Property
So what is flexbox, and why was it created? First, let’s look at how we 
currently lay out pages and some of the problems with that model.
Until last year, most of us were using tables to lay out our pages. Okay, 
maybe not last year! But I suspect that many of you reading this have been 
guilty of relying on tables at some point in your career. At the same time, it 
actually made a lot of sense. And let’s face it: it worked… to a point. 
However, we all then faced the reality that tables were semantically dubious 
and incredibly inflexible. And through the haze of this mark-up hangover, we 
caught a glimpse of the future: the CSS box model. Hurray!
Smashing eBook #19│Mastering CSS3│ 150
Documents you may be interested
Documents you may be interested