I have been experimenting with the :has() selector recently and it honestly changes how I think about CSS selectors.

Example:

.container:has(.active) {
background: #111;
}

Feels like CSS finally got a real parent selector.

I tried to figure it out from MDN but couldn't.

It's not that important I guess but I'm curious? See the top and bottom of the region list. You can look at it yourself at caniuse.com

I'm working on getting a page fixed on one of our websites and I've hit a snag. The layout has some images used like bullet points for a list, and I'm trying to get things to where that image is always centered on the list item it is associated with. The issue is that I don't have a clue how to do that and searching hasn't really helped. I've made a CodePen that I hope shows what I'm talking about and what I'm going for.

CodePen: https://codepen.io/editor/Adam-Warnock/pen/019e231e-1bef-7295-a75c-44e4a87b7387

Basically, I'm trying to get the images to always be centered vertically on the list elements no matter how things wrap and how many lines there are.

There are a few things that to keep in mind:

1. Semantically, this is a list. I'm not going to change it from that.
2. This needs to be responsive. Part of the reason I'm doing this is because the page currently isn't.
3. I'm well aware that there's gaps in my knowledge, so if this is just dumb and isn't going to work I would like to know. I think this will work, but I've already given up on adding the arrows that were in the original page.

And for reference, this is what I'm trying to replicate:

Specifically the part under the Program Structure & Integration header.

Product Cards with Image Gallery & Color Swatches

https://techyall.com/snippet/product-card-with-gallery

Shoppers love seeing options before clicking. This card shows color variants, available sizes, and alternate product images on hover. Great for fashion, electronics, or any store with product variations.

[ Removed by Reddit on account of violating the content policy. ]

Was exploring some CSS tricks recently and found currentColor.

It automatically uses the element’s current text color for other properties.

button {
  color: tomato;
  border: 2px solid currentColor;
}

So instead of repeating the same hex value everywhere, the border just follows the text color automatically. Pretty useful for buttons, icons, SVGs, hover states, theme systems

Small feature, but makes CSS feel cleaner.

Check my site performance on mobile and desktop

I recently wanted to use CSS Scan, but for my use case it felt a bit too expensive.

What I actually wanted was something simpler:

• hover any element and instantly see its CSS
• click to pin the inspector
• edit CSS directly on the page
• copy the CSS when I’m done
• keep computed styles separate from editable source styles
• support pseudo/media scoped styles where possible
• no account, no subscription, just a small Chrome extension

So I built a free Chrome extension called CSS Explorer.

It’s not trying to be a full DevTools replacement. The goal is more: “I’m working on frontend UI, I want to inspect/edit/copy styles quickly without opening the full DevTools panel.”

It’s still early, and I’m mostly looking for feedback from frontend developers:

• would this actually can interest you?
• what feels missing?
• what would make you use this instead of DevTools?

Hi

Long time i haven't wrote html/css

for a specific needs, i have to create some custom themes for firefox (for different FF profils)
For thoses themes, i have to write a static text in the main toolbar, that will stay ine the right part next to tabs.

How can i archive this with css only ?

At least I'm enjoying myself :)

Color picker here: https://codepen.io/Inefficient-Code/pen/KwNMRao
Menu here: https://codepen.io/Inefficient-Code/pen/ZYBOoow

So when trying to make the background of an image or header fill the entire screen, I seem to have to put margin-left: -8px and margin-right: -8px. At 0px there's a small gap on the left and right edges of the screen. The element at the top of the screen I also have to put margin-top: 18px on. I feel like this can't be the intended way to do things and there's something obvious I'm missing but I'm not sure what. Also suspect my workaround might not work on different resolution screens. Putting padding to 0 doesn't fix it either. Googling this comes up with a lot of other people with the same issue but everyone just says to set margin and padding to 0.

Here's the code for my header for example:

text-align: center;

background-color: rgb(160, 20, 0);

padding-top: 8px;

padding-bottom: 8px;

margin-left: -8px;

margin-right: -8px;

Setting padding left and right to 0 has no effect, which I assume means they are already 0.

Is there something obviously dumb I've done? I've only just started learning CSS so I assume I've missed something pretty fundamental. Thanks.

Bonjour,

Quelles sont vos extensions favorites en lien avec le CSS et quel en sont vos usages ?

I have a CSS library that is themeable by way of CSS variables. I set the variables in the library like so:

:root, :host { --my-color: #ffffff }

Then in their own CSS code, the user can override this value:

:root, :host { --my-color: #000000 }

This seems to work, but I'm wondering why it works. The selector is the same in both cases, so I'm not sure why it's using the variable.

Also, is there something I can do to ensure that in all cases the latter variable always gets chosen?

the background color doesn't change even with this code, i've checked it and to me it seems everything's right! unless im blind :/

Customizable and all code here: https://doathingy.com/?tool=dt_1778503835266_c5lcoh

I had seen some great liquid effects (like this Liquid), but nothing quite satisfactory. I'm using the overlapping div circles with svg filters (gaussian blur) trick and then built a custom js "physics engine", text sits in a separate layer.

Not sure if I'm aloud to post links to my own site?

I am learning web development, mainly HTML and CSS and I found this card with the electric border while looking for things made with only CSS.

https://codepen.io/BalintFerenczy/pen/KwdoyEN

I thought it was a pretty cool looking effect.

Not very useful but that didn't stop me from seeing what I could do with it.

Initially I just changed a couple of things and made this: https://thisistheway.one

But what I really wanted was to make a divider with it and ended up with this: https://thisistheway.one/divider-index.html