I'm working on a bigger project to practice some of my front-end skills.

Along the way, I've been struggling with the pain of selecting awkward stuff in CSS and discovered some neat tricks I'm sharing here.

Selecting classes that match patterns

This helps keep my HTML neat and tidy, and avoids duplication.

There are times I find myself weighing up whether I should use one class or another, where i want some elements to share some declarations but others to have a similar but independent look.

It gets messy.

I discovered a new way of selecting stuff based on similarities in the class names and it's pretty cool.

[class ^= 'content-'] { //Declarations }

It means any classes with a class name prefixed by content- will contain the declarations I set, then I can go ahead and styles independent elements or groups with their own declarations.

See it in action with my code pen. ⬇️

Confession: I don't want to admit how long it took me to figure out what the ^ symbol is. 🥕

Selecting Grandchildren when Children are mismatched

This one was more intuition and "hey what if this works" kind of thinking.

I already knew about selecting children.

.grid-container > p { //Declarations }

For all paragraphs that are

Well it works for grandchildren too, but what if the child elements are not all the same.

Then I used the all command.

.grid-container > * > p { //Declarations }

See it in action in this codepen. ⬇️