CODEWITHSUNDEEP
cssbootstrap-4
Elys
Elys

Reputation: 63

Some parts of my CSS style aren't applied. How can i fix the problem?

The rest of the CSS style works, but some parts aren't applied. How can i solve this?

Here is my HTML code and show three images that are displayed side by side. Each image has a title i want to write under each image, but the CSS style for these parts isn't applied.

<div class="row">
    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/paris.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Turnul Eiffel<br>
                <span>Paris</span></h3>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/japan.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Castelul Himeji<br>
                <span>Japonia</span></h3>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/grecia.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Santorini<br>
                <span>Grecia</span></h3>
        </div>
    </div>
</div>

And these are CSS style parts that aren't applied:

.placeBox .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: baseline;
    align-items: flex-end;
}

.placeBox .content h3{
    position: relative;
    margin: 0;
    padding: 10px;
    background: rgba(0,0,0,.95);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    text-align: center;  
}

Thanks!

Upvotes: 2

Views: 42

Answers (1)

nvioli
nvioli

Reputation: 4209

Those rules aren't applied because they use the "general descendent selector" of a space. When you put a space between two selectors like this:

.placeBox .content

You're telling it to look for elements with class content that have ancestors with class placeBox. Such an element doesn't exist in your markup, since the elements with those classes are siblings, so the rules are not applied.

To fix it, perhaps you want to use the sibling selector, +:

.placeBox + .content{
  ...
}

.placeBox + .content h3{
  ...
}

Upvotes: 4

Related Questions