Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to select an div element that doesn't have a Class or ID

Greeting all,

I’m a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,

I have a WordPress theme, there’s some contents doesn’t want to be appear so I’m trying to hide those contents by adding some coding to Additional CSS and the div element that I’m trying to hide don’t have any class or id given.

Please consider the example code below (I’m not showing entire code here, its just example code exact the same with html elements)

<div id="shop">
    <ul class="products">
        <li class="product" style="list-style: none;">
            <div class="product-inner">
                <div class="product-thumbnail"></div>
                <div class="product-summary">
                    <div class="summary-top"></div>
                    <div class="summary-bottom">
                        <div>Contents</div>
                        <form action="#">Form</form>
                        <div style="color: red;">Contents needs to be hide</div>
                        <a href="#">Link</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="product" style="list-style: none;">
            <div class="product-inner">
                <div class="product-thumbnail"></div>
                <div class="product-summary">
                    <div class="summary-top"></div>
                    <div class="summary-bottom">
                        <div>Contents</div>
                        <form action="#">Form</form>
                        <div style="color: red;">Contents needs to be hide</div>
                        <a href="#">Link</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
Tags:

3

Answers


  1. 0

    You can select the element with by using the general div tag.
    We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.

    This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].

    Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.

    Login or Signup to reply.
  2. 0

    You can use the selector property

    .summary-bottom div:nth-child(2) {
  display: none;
}
    Login or Signup to reply.
  3. 0

    This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.

    The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.

    Example:

    .summary-bottom > form + div {
  display: none;
}
    <div id="shop">
    <ul class="products">
        <li class="product" style="list-style: none;">
            <div class="product-inner">
                <div class="product-thumbnail"></div>
                <div class="product-summary">
                    <div class="summary-top"></div>
                    <div class="summary-bottom">
                        <div>Contents</div>
                        <form action="#">Form</form>
                        <div style="color: red;">Contents needs to be hide</div>
                        <a href="#">Link</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="product" style="list-style: none;">
            <div class="product-inner">
                <div class="product-thumbnail"></div>
                <div class="product-summary">
                    <div class="summary-top"></div>
                    <div class="summary-bottom">
                        <div>Contents</div>
                        <form action="#">Form</form>
                        <div style="color: red;">Contents needs to be hide</div>
                        <a href="#">Link</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search