DEV Community

loading...

CSS tricks you probably didn't know about.

sasscrafter profile image Dima Prohorenko ・2 min read

Today I'm gonna share with you some cool css selectors.

Let's start with counter.

To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.

<ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
li {
    font-size: 40px;
    margin-bottom: 20px;
    counter-increment: li;
}

.list li::before {
    content: counter(li);
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background-color: #f3b70f;
    color: white;
    text-align: center;
    line-height: 50px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

::selection.

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. The syntax looks like this:
Alt Text

p::selection {
  color: white;
  background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

Next is the attr() function.

It's used to retrieve the value of an attribute of the selected element and use it in the stylesheet.

<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>
Enter fullscreen mode Exit fullscreen mode
.title {
    font-size: 35px;
    letter-spacing: 3px;
}

.title::before {
    content: attr(data-count);
    font-size: 1.2em;
    color: steelblue;
    margin-right: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Adding Stroke to Web Text

<h2>Css is Awesome</h2>
Enter fullscreen mode Exit fullscreen mode
h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px tomato;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Discussion (18)

pic
Editor guide
Collapse
adam_cyclones profile image
Adam Crockett • Edited

I knew about them so I'm going to up the stakes.

How about this:

background: background;

It's a fun trivia one that many people do not know about.

border-radius: 9e9rem;

Now that's what I call round

πŸ˜‚

Collapse
mrdanielschwarz profile image
Daniel Schwarz

What does background: background; do? Inheritance?

Collapse
adam_cyclones profile image
Adam Crockett

Mad as this sounds. It takes the colour of your systems desktop background colour, the colour you would see without a background image.
So in other words it's different depending on which OS and platform you use.

Thread Thread
mrdanielschwarz profile image
Daniel Schwarz

Insane. My background is an image with a strong purple overlay, so I got a random purple colour (as if the eyedropper was used randomly).

Thread Thread
adam_cyclones profile image
Adam Crockett

Not quite the colour comes from the colour behind the image, it's an old fashioned thing back in the days of xp

Collapse
sasscrafter profile image
Dima Prohorenko Author

πŸ˜‚πŸ˜‚πŸ˜‚ now I do;)

Collapse
adam_cyclones profile image
Adam Crockett

I have plenty more of this stuff in my posts, the JS labeled loops one is a popular read

Thread Thread
sasscrafter profile image
Dima Prohorenko Author

I’ll definitely check it out

Collapse
btlm profile image
btlm

Wow, attr() is new for me. Thank you for your post! Very useful

Collapse
sasscrafter profile image
Dima Prohorenko Author

No problem broπŸ‘Œ

Collapse
junliangong01 profile image
JunliangOng01

Custom Software Development Services for business needs from software development company groupbwt.com. We deliver software products the way you want them to be.

Collapse
mikechrupcala profile image
Collapse
sasscrafter profile image
Collapse
leviathanprogramming profile image
π‹π„π‘½πˆπ‘¨π“π‡π€π Programming

The last one was the one I've been looking for! before I saw this, I used four "text-shadow"s to stroke the text.
Thank you so much for showing this to DEV!

Collapse
sasscrafter profile image
Collapse
im_codebreaker profile image
im_codebreaker

Thank you for your sharingπŸ‘Œ

Collapse
dojoprogramming profile image
Dojo Programming

The last one is Awesome πŸ‘Œ

Collapse
sasscrafter profile image