Hides a span of several divs

Question

I have several divs in a class and I would like to hide a span. But I don't succeed and I don't realize why. I did that, but I see that it's not an ok method, from what I've searched here and on other platforms it can be used and that's how it doesn't work for me. What do you think is wrong?

.similar list_prod > span.promotion {
     display: none;
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" "></a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

Try this selector instead `.similar.list_prod span.promotion` — blurfus, Jan 22 '21 at 18:48
your css selector is wrong. `.similar list_prod` searches for a class with the name `similar` and a tag called `` within it. As such tag doesn' t exist it isnt able to target it. — tacoshy, Jan 22 '21 at 18:51

Mihai T · Answer 1 · 2021-01-22T18:52:31.067

2

similar and list_prod are classes of the same element. To use them both you need to chain and connect them with . class selector .similar.list_prod

ANd also remove the direct descendant selector > because the span is not a direct descendant of your .similar.list_prod element

check answer here -> Using two CSS classes on one element

.similar.list_prod  span.promotion {
     display: none;
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" "></a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

edited Jan 22 '21 at 18:52

answered Jan 22 '21 at 18:50

Mihai T

17,254
2
23
32

@tacoshy yep. thanks for downvote – Mihai T Jan 22 '21 at 18:53
1

which I revoked as you fixed it... – tacoshy Jan 22 '21 at 18:54
@tacoshy yep. thanks for the upvote – Mihai T Jan 22 '21 at 19:00

score 1 · Answer 2 · answered Jan 22 '21 at 18:51

When you want to target a div that has two class names together, like here similar and list_prod, you should use .similar.list_prod.

Also, replace the direct child operator > by a regular child operator (a space character), since your span is a child of your div, but not a direct child. So, the rectified selector becomes:

.similar.list_prod span.promotion

score 1 · Answer 3 · answered Jan 22 '21 at 18:52

Your selector is incorrect, try:

.similar.list_prod span.promotion {
     display: none;     
}

<div class="similar list_prod">
    <div class="proditem">
        <div class="proditem_cover">
            <a href="" title=" " alt=" ">asdfasfd</a>
            <span class="promotion">Test: Test</span>
        </div>
    </div>
</div>

Also, your initial version of the posted HTML had a missing closing tag on the <a> tag.... make sure your actual code code does not have the same issue.

Hides a span of several divs

3 Answers3