DEV Community

Cover image for Share your CSS knowledge

Share your CSS knowledge

Nick Taylor on November 14, 2019

Today I learnt about the :placeholder-shown pseudo-selector thanks to Daniel’s Tweet. // Detect dark theme var iframe = document.getElement...
Collapse
 
wheatup profile image
Hao • Edited

Several tricks that I used very often:

Select all the elements with same class except for the first one

While you complaining there's no :not(:first-of-class) selector, you can do this instead:

.foo + .foo {
  margin-top: 1rem;
}

Mimicking grid-gap without using grid layout:

.album {
  --gap: 1rem;
  padding-top: var(--gap);
  padding-left: var(--gap);
}

.album > .photo {
  margin-right: var(--gap);
  margin-bottom: var(--gap);
}

Clear all the predefined styles

a {
  display: block;
  text-decoration: none;
  /* blah blah blah... */
}

a.logo {
  /* This disables all the rules defined above */
  all: unset;
  /* start from fresh */
}
Collapse
 
imcheesecake profile image
Freddie

I never knew about all! Thank you for this!

Collapse
 
jamesthomson profile image
James Thomson

object-fit is one I haven't used too much until recently (due to browser support). Once you can finally get off that IE11 train the web world really opens up!

developer.mozilla.org/en-US/docs/W...

Collapse
 
markmercier profile image
Mark

My favorite thing about object-fit is that you can use it with img srcset for responsive background images! The picture element is cool if you really need to be serving differently cropped images, but whenever I can get away with same aspect ratio and not supporting IE, I always use object-fit + srcset for all background images.

Collapse
 
jamesthomson profile image
James Thomson

Definitely a good use case! Did this myself in a recent project in fact.

Collapse
 
saurabhcodeword profile image
Saurabh

isn't is similar to background cover?

Collapse
 
jamesthomson profile image
James Thomson

Indeed it is, but can be used on replaced elements, such as image and video

Collapse
 
cwelewa profile image
Clinton Welewa

This property comes in handy when using the img selector, it could be responsive very good one tho!.

Collapse
 
fidelve profile image
FidelVe • Edited

I didn't learn this recently but I tend to forget it from time to time.

The nth-child() selector every now and then throws me off.

I don't know why but I always interpret it like "select the nth child of this element", when in reality is "select this element if it is also the nth child of its parent", to put it in code, let's say we have this structure:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

If I want to select the first div with the class name "child", I always first write .parent:nth-child(1), then realize my mistake when the code is not working and rewrite it as .child:nth-child(1)

Collapse
 
peoray profile image
Emmanuel Raymond

Wow...today I learned. Thank you ;)

Collapse
 
ben profile image
Ben Halpern
Collapse
 
nickytonline profile image
Nick Taylor • Edited

That made me think of this funny Tweet from @chriscoyier today about position sticky.

I think CSS variables are starting to gain steam. It makes a lot of sense for theming. DEV, for those who aren't aware, uses CSS variables quite a bit for theming.

@davidkpiano recently talked about his heavy use of them for animations on a recent episode of Shop Talk.

Him and David Shaw have this awesome Twitch stream where they reverse engineer animations. They're called the Keyframers and you can follow them on Twitch or on the Twitters.

It's really an amazing thing to watch.

Collapse
 
gixxerblade profile image
Steve Clark 🤷‍♀️

As I learned instead of writing six lines of JS to lock a nav bar I place, position:sticky; took care of it.

Collapse
 
huijing profile image
Chen Hui Jing

I tend to have multiple languages on my presentations and use the :lang() pseudo-class to tweak the styles for phrases/sentences that are not the main language.

developer.mozilla.org/en-US/docs/W...

Collapse
 
ericvalois profile image
Eric Valois

What, I never heard of it! Awesome!

Collapse
 
keevcodes profile image
Andrew McKeever

Using the tilda to target siblings has huge use cases

.oneElement ~.anotherElement

Collapse
 
saurabhcodeword profile image
Saurabh

I once used :placeholder-shown thing to make a material design like floating input label.

Collapse
 
markmercier profile image
Mark

I LOVE absolutely positioned ::before and ::after pseudo-elements. I usually use them to either draw lines underneath elements or additional boxes the full size of the element, which you can do wackier things to (like transforms) than using things like borders or background colors.

Example of an underline for a link:

.link {
    position: relative;
}

.link::after {
    /* 'content' value is required - this is just blank */
    content: ""; 
    position: absolute;
    display: block; 

    /* matches the width of the nearest position: relative parent */
    width: 100% 
    height: 2px;

    /* anchor it to the bottom-left corner */
    bottom: 0;
    left: 0;

    background-color: purple;
}

I use them all the time, so I set up a little SASS mixin to save some keystrokes and clean up my code:

/* the mixin (simplified version) */
@mixin pseudo($type) {

    content: "";
    position: absolute;
    display: block;

    if($type == width) {
        width: 100%;
    }
}

/* the code above with mixin */
.link {
    position: relative;

    &::after {
        @include pseudo(width);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: purple;
    }
}

Once you start playing around with them you'll find there's all kinds of fun stuff you can do without having to change the HTML at all!

Collapse
 
coffeecraftcode profile image
Christina Gorton
Collapse
 
itshall profile image
Tyler Hall

😯

Collapse
 
alohci profile image
Nicholas Stimpson

I'm very much taken by display:contents at the moment. When creating different cases in responsive layouts, the ability it gives to flatten the box tree has a surprising number of uses.

Collapse
 
kylefilegriffin profile image
Kyle Griffin

:not can be stacked, to allow for multiple classes to be excluded:

.grid:not(.blue):not(.red) { }

This is because .grid:not(.blue), .grid:not(.red) will include both supposedly excluded classes as one includes the other.

Collapse
 
axelledrouge profile image
AxelleDRouge

Recently, in an effort to refactor (read rewrite) an app that was terribly written (like really really badly to the point of creating BIG security holes) I learned a lot of new things about css and scss (and React, and webpack, and Jest, and TDD, and security driven development, and...). From CSS Grid to beautifully manage the general layout of the page to css variables for theming (thanks for that Dev.to), with @mixin and @import ... soo many things to create clean, short, organized and efficient css styles

Collapse
 
filipasimao profile image
Filipa Simão

place-items - shorthand for align-items and justify-items
place-content - shorthand for align-content and justify-content

Collapse
 
baukereg profile image
Bauke Regnerus

Made use of the :first-of-type pseudo-class fir the first time.

Collapse
 
tpkahlon profile image
Tej

a:link selector!

Collapse
 
niyasrahman profile image
niyasrahman
*{
  border:1px solid red;
}
Collapse
 
coffeecraftcode profile image
Christina Gorton

One I learned and others seem to have missed also is justify-content: space-evenly. Instead of space-around or space-between. When using flex-box.

Collapse
 
coffeecraftcode profile image
Christina Gorton

Not supported in IE and not complete support in Edge by the way 😬
caniuse.com/#feat=justify-content-...

Collapse
 
glennmen profile image
Glenn Carremans

I think this blog post I made some time ago is a nice CSS trick I learned.

Collapse
 
nickytonline profile image
Nick Taylor

Nice! Thanks for sharing.

Collapse
 
iheanx profile image
Mazi Iheanacho

Place-items can be used in place of
justify-content and align-items