CSS tricks you probably didn't know about.

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>

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;
}

::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:

p::selection {
  color: white;
  background-color: green;
}

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>

.title {
    font-size: 35px;
    letter-spacing: 3px;
}

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

Adding Stroke to Web Text

<h2>Css is Awesome</h2>

h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px tomato;
}

Comments

[Adam Crockett 🌀]

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

😂

[Dima Prohorenko]

😂😂😂 now I do;)

[Adam Crockett 🌀]

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

[Dima Prohorenko]

I’ll definitely check it out

[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.

[btlm]

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

[Dima Prohorenko]

No problem bro👌

[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.

[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!

[Dima Prohorenko]

Glad to help

[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

[Conner Ow]

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!

[Dima Prohorenko]

Glad to help

[im_codebreaker]

Thank you for your sharing👌