CODEWITHSUNDEEP
htmlcsscss-selectors
Rob F
Rob F

Reputation: 539

before and after selectors not behaving as expected

I have the following css:

#clickto {
    color: white;
    text-shadow: 2px 2px 2px Darkblue;
}

#verdescheading:hover {
    border-bottom: 1px solid;
}


    #verdescheading :before {
        content: " >";
    }

    #verdescheading :after {
        content: " <";
    }

    #verdescheading .clicked:before {
        content: "< ";
    }

    #verdescheading .clicked:after {
        content: "> ";
    }

and the following html (this cut&pasted directly from firebug, so it's accurate as can be):

<h1 id="verdescheading" class="">
Important notice
<span id="clickto">(Click to expand)</span>
</h1>

When clicking on the title part of the event sets the class of 'verdescheading' to 'clicked'. Firebug shows that everything is being set as it should be. However, what I am seeing on the page is a bit different.

First, the > and < symbols set as per the stylesheet, appear before and after not the h1 with id verdesc, but the span with id 'clickto', i.e. its immediate child. Firebug clearly shows that the 'clicked' class is set on the parent and not the child.

The other thing is that the symbols don't change, i.e. it's always the rules of :before and :after rather than .clicked:before and .clicked:after.

Upvotes: 0

Views: 68

Answers (1)

user1521604
user1521604

Reputation: 

#verdescheading.clicked:before {
    content: "< ";
}

#verdescheading.clicked:after {
    content: "> ";
}

Will fix the symbols not changing, since id and class are on the same element and not one of its children, there is no space.

The other ones are also fixed with spacing issues:

#verdescheading:before {
    content: " >";
}

#verdescheading:after {
    content: " <";
}

See the JSFiddle jsfiddle.net/BWghm courtesy of bfavaretto

Upvotes: 4

Related Questions