DEV Community

Dima Prohorenko
Dima Prohorenko

Posted on

CSS tricks you probably didn't know about.

#css #html #webdev

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

Top comments (18)

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
 
sasscrafter profile image
Dima Prohorenko •

😂😂😂 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 •

I’ll definitely check it out

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.

Collapse
 
btlm profile image
btlm •

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

Collapse
 
sasscrafter profile image
Dima Prohorenko •

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
 
ironcladdev profile image
IroncladDev •

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
Dima Prohorenko •

Glad to help

 
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
 
mikechrupcala profile image
Michael Chrupcala •

Very cool! Pseudo-classes are a secret weapon...I've used the pseudo's like hover and visited, and a few nth-child classes but I didn't know about any of the ones you listed. Thanks for sharing!

Collapse
 
sasscrafter profile image
Dima Prohorenko •

Glad to help

Collapse
 
imcodebreaker profile image
im_codebreaker •

Thank you for your sharing👌

View full discussion (18 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.