Search

Nalezeno "the child": 112

CSS :nth-of-class selector


That's not a thing. But it kinda is! Bram covers how frustrating .bar:nth-child(2) is. It's not "select the second element of class .bar." It's "select the second element if it also has the class .bar." The good news? There is a real selector that does the former: :nth-child(2 of .bar) { } Safari...

Flexbox and absolute positioning


Chen Hui Jing notes that when you absolutely position a flex item, it's no longer part of the flex layout. Except... it kinda is a little bit. If you make the child position: absolute; but don't apply any top/right/bottom/left properties, then flexbox alignment will still apply to it. It's odd...

“weeds of specificity”


Lara Schenck: [...] with WordPress child themes, you are all but guaranteed to get into the weeds of specificity, hunting around theme stylesheets that you didn’t author, trying to figure out what existing declaration is preventing you from applying a new style, and then figuring out the least...

Selectors Explained


Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That happened to me the other day. Here's what I wrote: .site-footer__nav a:hover svg ellipse:first-child { } At the end of it, I honestly couldn't...

A Use Case for a Parent Selector


Having a "parent selector" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I'd document it here. A classic...

Two Lessons I Learned From Making React Components


Here’s a couple of lessons I’ve learned about how not to build React components. These are things I've come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot...

The Thought Process Behind a Flexbox Layout


I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that. Just adding display: flex; to the parent element lays out the children in a row. Well, that's cool. I guess I could have floated them, but this is easier. They should probably take up the full space they have...

What is super() in JavaScript?


What's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super.<methodName> to access its parent’s methods. This article will assume at least a little familiarity with the concepts of constructors and child...

Staggered CSS Transitions


Let's say you wanted to move an element on :hover for a fun visual effect. @media (hover: hover) { .list--item { transition: 0.1s; transform: translateY(10px); } .list--item:hover, .list--item:focus { transform: translateY(0); } } Cool cool. But what if you had several list...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace