Question

Ok, I’m quite new to CSS3. I have this code:

    <div class="Mat-Shadow-Box-Text">
    <div class="Mat-Shadow-Box-TextBleu2">

        MyText

    </div>
</div>

That works great. But then I want to change Mat-Shadow-Box-TextBleu2 for Mat-Shadow-Box-Text2. Same CSS class copy/pasted with 0 change (wanted to test before changing anything).

.Mat-Shadow-Box-Text
{
    margin: 0px 0;
    border-radius: 20px;
    box-shadow: 10px 10px 20px #888;    
    behavior: url(ie-css3.htc);
}

.Mat-Shadow-Box-TextBleu2
{
    border-radius: 20px;
    border-width: 3px;
    border-style: solid;
    border-color: #888;
    padding-left: 18px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.Mat-Shadow-Box-Text2
{
    border-radius: 20px;
    border-width: 3px;
    border-style: solid;
    border-color: #888;
    padding-left: 18px;
    padding-bottom: 15px;
    padding-top: 15px;
}

Now my 100$ question is: Why when I change the class name in my tag, it doesn’t work? (the border doesn’t appear on the web page). Also, I tried just renaming .Mat-Shadow-Box-TextBleu2 by .Mat-Shadow-Box-Text2 (in both CSS class and DIV code) and it doesn’t work either!

So, to summarize, my original code works fine, but I can’t rename nor change to another class in my second DIV tag. Note that I don’t have this problem with my first DIV class. I can rename .Mat-Shadow-Box-Text or point to a different class and it works just fine.

Cheers!

Answer 1

When in dev its always a good practice after changing Back-End Code, CSS, or HTML to always Ctrl+F5 to refresh your browser to force it to get everything again from the server. That seems to be what you have happening here. Its especially noticeable with CSS changes.