hide second div of a particular p tag using css

Question

I want to hide the second div after this div, there is no identifier for that div.

That's why I took this p tag attribute as an identifier. I tried using jQuery, but in page load it's sometimes visible. Is there any way to hide it permanently?

div p[data-udy-fe="text_-a91032"] {
    
}

I'm adding my jQuery code here, but when page loading we can see the div's content for some seconds. I need to hide it permanently, without the brief flash.

$("p").each(function(){        
    if($(this).attr('data-udy-fe') == 'text_-a91032') {
        $(this).next('div').next('div').hide();
    }
});

score 2 · Accepted Answer · answered Oct 19 '21 at 10:14

2

You can use + div + div selector

p[data-udy-fe="text_-a91032"]+ div + div {
  display: none;
}

<div>
  <div>Paragraph1</div>
  <div>Paragraph2</div>
  <p data-udy-fe="text_-a91032">Paragraph3</p>
  <div>Paragraph4</div>
  <div>this one is not displayed</div>
  <div>Paragraph6</div>
<div>

answered Oct 19 '21 at 10:14

Charles Lavalard

2,061
6
26

You are Great, it's worked well.. <3 <3 ,Thank You so much <3 <3 – ANGELA Oct 19 '21 at 10:51
No bother. Happy coding :) – Charles Lavalard Oct 19 '21 at 12:36

score 0 · Answer 2 · answered Oct 19 '21 at 10:00

0

You can use the general sibling combinator to select the p tag which occurs after your specific element.

div p[data-udy-fe="text_-a91032"] ~ p {
     display: none;
}

answered Oct 19 '21 at 10:00

Ryan Peterson

132
1
9

thanks for the attempt, i had to hide the second div next to the p tag,not the p tag element – ANGELA Oct 19 '21 at 10:53

hide second div of a particular p tag using css

2 Answers2