Search code examples
htmlcsscss-selectorswordpress-themingpseudo-class

How to Hide Slide 1 Banner Content with Pseudo CSS Class Selector?

Please help me identify which CSS selectors I need to choose to hide the title and caption in the FIRST SLIDE/Banner of the slideshow. You can probably catch something I missed.

Screenshot

See WordPress theme in the browser to use Google Dev inspect tools to pick CSS classes: https://demo.evisionthemes.com/clean-biz/

Code: 

<div class="slide-item cycle-slide" style="background-image: url(&quot;https://i0.wp.com/demo.evisionthemes.com/clean-biz/wp-content/uploads/2016/04/architecture-1867635_1280.jpg?fit=1280%2C847&amp;ssl=1&quot;); position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 0; display: block; visibility: hidden;">
    <div class="thumb-overlay main-slider-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-sm-10 col-md-8 col-xs-offset-1 col-sm-offset-1 col-md-offset-2 banner-content">
                <div class="banner-content-inner">
                    <div class="banner-content-inner">
                        <h2 class="banner-title alt-title"><a href="https://demo.evisionthemes.com/clean-biz/clean-biz-free-business-theme/">Clean Biz- Free Business Theme</a></h2>
                        <div class="text-content">
                            We create digital products for your online business.
                        </div>
                        <div class="btn-holder">
                            <a class="button" href="https://demo.evisionthemes.com/clean-biz/clean-biz-free-business-theme/">Click to Start</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I've tried and failed:

.banner-content-inner:first-child {
    display: none; 
}

.banner-content-inner, .slide-item:first-child {
    display: none; 
}


.cycle-slideshow .banner-content-inner:first-child {
display: none; 
}

I even tried to add an if conditional to the slider include PHP file, but no bueno. Hopefully this will work. Seems like the easiet.

Solution

  • Judging by the code above, the solution will be

    .cycle-slideshow .slide-item:first-child .banner-content-inner {
    display:none;
}

    Breakdown: .cycle-slideshow is the parent and it contains several .slide-item

    Since you're trying to target the with the first element of its kind, you do .cycle-slideshow .slide-item:first-child

    and finally target the element you wish to hide .banner-content-inner.

    Problem solved.