CSS How do I only show the first element using css

[rajc08]

I want to be able to ONLY show the first "in-conversation-wistia" div element so that the second one with the same class name is hidden. I tried doing this using the below code but didn't work and gets both of the div elements.

I used the below code to achieve this but it did not work.

.in-conversation-wistia {
  display:none;
}

.in-conversation-wistia:nth-child(1) {
    diaplay:block;
}

See the screenshot, the yellow highlighted is the only one I want to show

Thanks,

Raj

 

[BGB]

First hide all your .in-conversation-wistia class and put the .show class in that element which you want to show. There is already a class named .show.

 

[rajc08]

First hide all your .in-conversation-wistia class and put the .show class in that element which you want to show. There is already a class named .show.

how do I do this in CSS

 

[BGB]

Post the full css of .in-conversation-wistia class and .show class.

 

[rajc08]

Post the full css of .in-conversation-wistia class and .show class.

Test Activity – touchENDOCRINOLOGY

www.touchendocrinology.com

 

[BGB]

There are lots of css files in your site. Find where is the .in-conversation-wistia class and .show class. And post here.

 

[rajc08]

the .show class only has a "display:block" and in-conversation-wistia is just an empty class as I am differentiating it from conflicting with other classes which were called "wistisa"

 

[BGB]

What is the css file name?

 

[rajc08]

What is the css file name?

https://www.touchendocrinology.com/wp-content/themes/tmm2020/build/css/production.css?ver=20210930211043

 

[BGB]

See the video(zip attached). If this is what you want than add the below code in your production.css file below body class(line 280)-

.c-video-section-wrap{
    display:none;
}
.show{
    display:block;
}

And add show class in your html file(line 738)-

<div class="c-video-section-wrap c-video-section-wrap--bg-color t-ime show">

 

[rajc08]

See the video(zip attached). If this is what you want than add the below code in your production.css file below body class(line 280)-

.c-video-section-wrap{
    display:none;
}
.show{
    display:block;
}

And add show class in your html file(line 738)-

<div class="c-video-section-wrap c-video-section-wrap--bg-color t-ime show">

Thanks for you help but the show class is only toggled using jquery when the link for it is clicked. by default I need all "in-conversation-wistia" hidden apart from the first one. Then when you toggle each one, it will add a class of "show" and class of "hide" to others so that only one video is showing at any one time. Does that make sense?

 

[BGB]

In that case don't put the show class in html. Than nothing will be visible.

 

[rajc08]

In that case don't put the show class in html. Than nothing will be visible.

but I need the first video to show otherwise it will be a blank page lol. All I need is the yellow highighted but to show without the other ones showing . Make sense? I hope you can help, because you're so close to a solution. I have tried and can't work it out

 

[BGB]

I am a bit confused now. In my video the first video is showing and other are hidden. What else you want to show more?

 

[rajc08]

im sorry! lol. so you are manually addding it in css. My video is being generated via php in a forloop so I can't hardcode the the "show" class specifically to it hence, I need to show the FIRST video only out the three and then use Jquery or javascript to toggle the "show" class so that each time, only one video is being showed when you click the chapters on the left hand side on the page

 

[BGB]

I am just telling you where to put the code. It is on your hand either you will make id static or dynamic.

 

[rajc08]

I am just telling you where to put the code. It is on your hand either you will make id static or dynamic.

That's fine. thank you so much for all your help

 

[Ghost]

Pretty sure you can use "first-of-type" selector in CSS to make sure the first in-conversation-wistia in your main 'section' is shown while others are not.

Glad you solved it though. For future, look into first-of-type, first-child, etc.