The real power of CSS 💪🎨

The real power of CSS 💪🎨


1 min read

1. Image carousel in 2 lines of CSS

.container {
    scroll-snap-type: x mandatory;

.slides {
    scroll-snap-align: start;

See this is action here👇

2. Truncate text without using JavaScript😎

.example {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis

3. Negative value in "nth-child"

Use negative value in nth-child and select element form 1 to n. For example, code snippet will select 1 to 4 "li" element

li:nth-child() {
    color: red
Note: I will add a cool tip or trick daily to this article