Applying :target within a class

[seaxwi]

I’m want to apply the style to :target to all elements within the .container class.

However, the following is being applied to :target anywhere on the page.

.container :target { 
  scroll-margin-top: 100px;
}

What am I doing wrong?

[MAZ1211]

@seaxwi

.container :target {

I think the issue is you added a space after .container, remove the space.
Here’s a demo I did on codepen

[a_aramini]

hard to say without seeing any other code(your full html and css)

My guess is that you have all the containers as members of container
class?

You could set an id on the specific container you want to target, and then target that id in your CSS.

Classes use " . ", ids use " # ". Id has higher specificity than class.

But again based on the code you have provided, it is difficult to guess.

@MAZ1211

I think the issue is you added a space after .container , remove the space.
Here’s a demo I did on codepen

or that

[seaxwi]

I’m not at liberty to share the code, but I created a minimal example for what I wanted to do, and it actually worked.

After some digging I found out that I that the CSS file I was editing was a copy, and not the one in use. The code I posted does indeed work. And the space is needed, it does not work when removed.

Well, lesson learned.

[a_aramini]

Understandable. I’ve done things like that myself before lol

Glad you got it sorted out.