An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements. Hola a todos! (Hello, everyone!) In my early days of web design, I had to learn things the hard way: trial and error. There was no Smashing Magazine, Can I Use, CodePen or any of the other amazing tools at our disposal today. Having someone show me the ropes of web design, especially on the CSS front, would have been incredibly helpful. Now that I am far more experienced, I want to share with you in a very friendly, casual, non-dogmatic way a CSS reference guide to pseudo-classes and pseudo-elements. If you’re an experienced web designer or developer, you must know and have used most of the pseudo-classes and pseudo-elements discussed here. However, I encourage you to check the table of contents1; you might not have heard of one or two of them before. Before diving into the meat and bones, and because this article is about pseudo-classes and pseudo-elements, let’s start with the basics: Have you ever wondered what the word “pseudo” means?
Single Or Double Colon For Pseudo-Elements? Demo: Better CSS Drop Caps With “initial-letter” Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body text within these lines. It’s a typographic tradition as old as the history of typesetting itself, and these days we can emulate it with CSS using the ::first-letter pseudo element.
Styling that first letter, however, is notoriously clumsy, but the proposed initial-letter property aims to fix that. Let’s examine what it is, what we can do with it, and what we can expect in the future. Let’s begin with a demo; a paragraph of text. This isn’t bad, and can be further tweaked with line-height, positioning and so on. The initial-letter property, currently being discussed as an Editor’s Draft by the W3C (about as early on in the standardising process as it’s possible to be), aims to give us the precise typographic control we want. The first value it takes determines the size of the initial letter, in terms of how many lines it occupies.
Stand by me. Inline-block whitespace fixing. Justified and Vertically Centered Header Elements. A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. Sometimes the most simple looking little layouts require complicated structures and various styling tricks. Centering elements, justifying content or aligning them the way we want can get really funky and frustrating.
One of those little simple things that comes with many pitfall when laying it out is the justified header: title on the left and navigation on the right side. You could use floats, position one of the elements absolutely and more, no big deal. But now you’d like to center both things vertically. Easy, just add paddings, margins or set the line-height to the height of the parent, right? Today I don’t want to go through all of the different possibilities of centering header (or any other) elements vertically and justifying them. So, we want to create a header with the following look: The markup is simply So this it what we have right now: Almost! Crafting Better Responsive Image Galleries With Flexbox. One common issue in responsive design is the “odd man out” problem.
Laying out a series of elements of approximately equal size is easy when there’s enough room: But the moment the browser window narrows, the last element drops off the edge and is left hanging by itself. Ideally, we want any elements pushed onto a new line to take up the same amount of space as those that remain above them, creating a stronger and more cohesive design: That’s exactly the kind of problem flexbox was built to solve. Then we can craft the following CSS (ignoring older flexbox syntaxes, for the sake of clarity): As you can see when you resize your browser window while looking at the example above, this very neatly solves the layout problem: an image pushed into a new row becomes the width of those above it.
This design pattern can work equally well for non-image elements with different heights and aspect ratios, as I’ll demonstrate in the next article. Explore the complete code for this layout on CodePen.