1

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.

  • I may be missing something, but have you tried: `.banner-content-inner { display: none; }` – Yoryo Feb 23 '18 at 16:34
  • 1
    Yes but that would remove it for all slides and I just want to hide it for the First Slide. –  Feb 23 '18 at 16:39
  • You may want to try to select the slide of the carousel by style and background-image. The answer to this other question may be helpful: https://stackoverflow.com/questions/39893991 – Yoryo Feb 23 '18 at 17:24
  • Could it have to do with the fact that a nested `div` has the same class as the parent? Try and change the second `class="banner-content-inner"` to something else – msokrates Feb 23 '18 at 17:29

1 Answers1

0

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.

Mueyiwa Moses Ikomi
  • 1,069
  • 2
  • 12
  • 26