0

I have this markup and I need to override the background-color with inner classes:

.assign-1 div {
    width: 500px;
    margin: 7px auto;
    padding: 20px;
    /* background-color: blueviolet; */
    background-color: rgb(138, 43, 226);
    /* background-color: #8a2be2; */
    color: white;
}

.assign-1-shape-2 {
    background-color: rgba(138, 43, 226, 0.5);
}

.assign-1-shape-3 {
    background-color: rgba(138, 43, 226, 0.1);
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Assignments</title>
</head>
<body>
    <div class="assign-1">
        <div class="assign-1-shape-1">Normal Div One</div>
        <div class="assign-1-shape-2">Normal Div Two</div>
        <div class="assign-1-shape-3">Normal Div Three</div>   
    </div>
    
</body>
</html>

I don't need a solution, I know I can overcome this problem by doing this:

.assign-1 div {
    width: 500px;
    margin: 7px auto;
    padding: 20px;
    /* background-color: blueviolet; */
    background-color: rgb(138, 43, 226);
    /* background-color: #8a2be2; */
    color: white;
}

.assign-1 .assign-1-shape-2 {
    background-color: rgba(138, 43, 226, 0.5);
}

.assign-1 .assign-1-shape-3 {
    background-color: rgba(138, 43, 226, 0.1);
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Assignments</title>
</head>
<body>
    <div class="assign-1">
        <div class="assign-1-shape-1">Normal Div One</div>
        <div class="assign-1-shape-2">Normal Div Two</div>
        <div class="assign-1-shape-3">Normal Div Three</div>   
    </div>
    
</body>
</html>

what I don't understand is why can't I override the properties with the inner classes without specifying the outer container's class?!

thanks in advance.

Raki Lachraf
  • 99
  • 1
  • 8
  • 1
    you can override the inner class without the outer container's class by using `!important` – depperm Oct 06 '21 at 11:13
  • 1
    It's because of specificity, see: https://www.w3schools.com/css/css_specificity.asp Basically .assign-1 div is more 'specific' than .assign-1-shape-3 – Andyweb Oct 06 '21 at 11:58

0 Answers0