Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Selectors: A Visual Guide

fffuel.co

Post reply on HN
Print view View original

21–30 of 59 posts

Re: CSS Selectors: A Visual Guide

#21

Post by hinkley »

bryanrasmussen wrote: post #16
ailef wrote: post #13

Earlier quoted context omitted.

How do you create reusable styles this way?

modern JS has a bunch of half-assed scenarios for solving this problem that allows you to solve almost everything CSS did a few years ago and helps keep people stuck in ineffective legacy ways of doing it because all their code would have to be rewritten to use straight css. I know because every place I've worked in the last few years uses some form of CSS in JS.

Every five years or so prior to CSS 3, there was a push to purge styling and animation decisions from JS. We are meant to be past that now.

Calling it a feature that you have CSS in your JS is tantamount to saying you’re writing legacy code. Which happens, but don’t be cheerful about it.

Re: CSS Selectors: A Visual Guide

#24

Post by oneeyedpigeon »

hinkley wrote: post #19
Kiro wrote: post #9

Cool but also reminds me why I use inline styles for everything. I don't want to fiddle with selectors. I want to put the styling right on the element.

In a large app you often can’t easily find all of the html. It’s less work by far to ensure you can find all of the CSS though. And when the company decides to rebrand and change the color scheme for the whole app, which they will at least half the time, you’ll be glad not to be playing whack-a-mole. Problems that aren’t done when you think they’re done create a lot of friction with the rest of the org. Open ended pr…

> In a large app you often can’t easily find all of the html.

Which is often a warning sign of a bad design. The times I've dealt with systems that bury a certain piece of text in either a content file or a template or the database...

> It’s less work by far to ensure you can find all of the CSS though.

Hmm... depends. I've seen things like React embedding the CSS directly in with the markup and component logic etc. So this hasn't necessarily gotten any better — in fact, a site consisting JUST of html files would probably be easier to find CSS in even if it's all added via inline style attributes.

Re: CSS Selectors: A Visual Guide

#26

Post by ataylor32 »

Here are a couple quotes from https://developer.chrome.com/articles/css-nth-child-of-s/#pr... :

New in CSS Selectors Level 4 is the ability to optionally pass a selector list into :nth-child() and :nth-last-child().

For example, :nth-child(2 of .highlight) selects the second matching element that has the .highlight class. Put differently: out of all children with the class .highlight, select the second one.

Re: CSS Selectors: A Visual Guide

#28

Post by hoherd »

Kiro wrote: post #9

Cool but also reminds me why I use inline styles for everything. I don't want to fiddle with selectors. I want to put the styling right on the element.

FWIW, these are useful for more than styling. I don't do any front-end dev work, but I use these regularly in selenium to find components in the page to interact with.

Re: CSS Selectors: A Visual Guide

#30

Post by hk1337 »

reaperducer wrote: post #11
hk1337 wrote: post #6

Very cool. It seems to be missing the begins with and ends with selectors for the attr-val. [title^=“old”] and [title$=“old”]

[title^=“old”] and [title$=“old”] Once you get used to using these, and their relatives, you find all kinds of uses for them, like applying styles only to telephone links: a[href^="tel:"]

Definitely, also, they're called CSS selectors but I use them a lot in javascript for query selection too.
Post reply on HN