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. 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? Adjective1. not actually but having the appearance of; pretended; false or spurious; sham.2. almost, approaching, or trying to be.
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.
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. 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 <header><h1>Super Bad</h1><nav><a>First Link</a><a>Second Link</a><a>Third Link</a></nav></header> 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. Let’s say we have a gallery of images with the same aspect ratio in a <header> element: 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. Photographs by Jeremiah Wilson, licensed under Creative Commons.
Explore the complete code for this layout on CodePen.