Style precedence - Need some tips

Harliquinn
Harliquinn

I'm trying to add some custom graphics on the Character list page based upon Tags assigned to a character. Here is the snippet of CSS. I would have thought the general definition list first would be overridden by the more specific styles beneath it. However, for the character in question, the second set of CSS Isn't being used.

div.character-info a::before {

    position: absolute;

    background-size: 20px;

    height: 70px;

    width: 25px;

    display: block;

    background-repeat: no-repeat;

    top: 0px;

    left: 0px;

    content: "";

    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5))

}

 

div.character-info a[data-tag=“Montaigne”]::before {

    background: url(https://www.dropbox.com/s/yw7d6jvl05p546z/Montaigne.png?dl=1);

    position: absolute;

    background-size: 38px;

    height: 52px;

    width: 38px;

    display: block;

    background-repeat: no-repeat;

    top: -40px;

    left: -80px;

    content: "";

    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5))

}

 

Comments

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions