How to assign css rule to first element with a particular class?

Question

I have the same class several times in the same DOM (as normal), and I'd like to apply a padding to the first element in the DOM using that class. ( I am using sass).

So far I tried>

.myclass{
    &:first-of-type{
        padding-top: 50px;
    }
}

and

.myclass{
    &:nth-child(1){
        padding-top: 50px;
    }
}

and

.myclass{
        &:nth-of-type(1){
            padding-top: 50px;
        }
    }

and only the last piece of code seems to have any effect on the DOM adding padding to ALL elements using .myclass (and not only the first one).

Any idea about what I doing wrong?

I went to answer but apparaently someone marked as duplicate (which also didn't have a proper answer). There are 2 ways of acomplishing this: you can add the first child thingy and then undo the padding for all the next elements with the [~ selector](https://www.w3schools.com/cssref/sel_gen_sibling.asp). like `.myclass:first-of-type ~ .myclass` — teefars, Oct 30 '21 at 10:07
Another way is to just add a crazy function to the selector matching number, like `.myclass:nth-child(1+ 900n)`. — teefars, Oct 30 '21 at 10:08
It is not a duplicate because here he states it is in the same DOM (all siblings) and the answer marked is for all DOM (not the same parent element) — teefars, Oct 30 '21 at 10:13

Vincent G · Answer 1 · 2016-03-30T19:56:07.850

2

How about :first-of-type ?

.myclass:first-of-type {
  // do something
}

See this fiddle

EDIT

See @Ryan Dantzler fiddle about this solution using SASS :

https://jsfiddle.net/swpk5x86/2/

edited Mar 30 '16 at 19:56

answered Mar 30 '16 at 19:44

Vincent G

8,547
1
18
36

OP has already tried this. – Ryan Dantzler Mar 30 '16 at 19:47
Not exactly this, this works fine in the fiddle – Vincent G Mar 30 '16 at 19:49
If this works and what he tried before didn't then his Sass is not being compiled – Ryan Dantzler Mar 30 '16 at 19:51
It's weird because he says the last part of code he tried had an effect, so it must be compiled – Vincent G Mar 30 '16 at 19:53
https://jsfiddle.net/swpk5x86/2/ – Ryan Dantzler Mar 30 '16 at 19:53
you're right, it seems to work like this .. then we have to wait for further informations – Vincent G Mar 30 '16 at 19:56
My apologies, this works as well just like the last snippet of code (affecting all elements using the same class in my project). – carlosbvz Mar 30 '16 at 20:02

How to assign css rule to first element with a particular class?

1 Answers1