CODEWITHSUNDEEP
htmlcss
maxelcat
maxelcat

Reputation: 1333

can't use first-child css to set display

I am using wordpress and its generating this code:

<aside class="left-hand-column">
 <div class="textwidget">
  <p></p> ...1
   <div class="pdf-download">
    <p> ... 2
     <a href="http://www.kusuma.ee-web.co.uk/wp-content/uploads/2016/04/strategy2015-2018.pdf" target="_blank">download pdf</a>
    </p>
   </div>
  <p></p> ...3
 </div>
</aside>

I want to remove the effects of the <p></p> tag pairs.

I thought I could set display:none for them like this:

.textwidget p:first-child {
    display:none;
}

but its making 1 and 2 p's disappear and leaving 3 - how could I get it to do what I need please?

Upvotes: 3

Views: 114

Answers (2)

user6213434
user6213434

Reputation:

If you are familiar with jquery you can use this

$('.textwidget p').each(function () {
    if ($(this).text().length === 0) {
        $(this).hide();
    }
});

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191976

You can remove the p which are direct descendants of .textwidget:

.textwidget > p {
    display:none;
}

You can remove :empty paragraph tags instead:

.textwidget p:empty {
    display:none;
}

Upvotes: 7

Related Questions