How to select an div element that doesn't have a Class or ID-CodePudding

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 >
        <li  style="list-style: none;">
            <div >
                <div ></div>
                <div >
                    <div ></div>
                    <div >
                        <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  style="list-style: none;">
            <div >
                <div ></div>
                <div >
                    <div ></div>
                    <div >
                        <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>

CodePudding user response：

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 >
        <li  style="list-style: none;">
            <div >
                <div ></div>
                <div >
                    <div ></div>
                    <div >
                        <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  style="list-style: none;">
            <div >
                <div ></div>
                <div >
                    <div ></div>
                    <div >
                        <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>

CodePudding user response：

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.

CodePudding user response：

You can use the selector property

.summary-bottom div:nth-child(2) {
  display: none;
}

CodePudding user response：

div[style="color: red;"] {
  display: none;
}

To hide the contents that you want to hide in the WordPress theme, you can use the CSS display property. This property allows you to control how an element is displayed on the page, and setting it to none will hide the element completely.

To apply the display property to the specific div element that you want to hide, you can use a CSS selector to target the element. Since the div element does not have a class or ID attribute, you can use an attribute selector to target the element based on its inline style attribute.

Here is an example of how you could use an attribute selector to hide the div element that has the color: red; inline style attribute:

To add this CSS code to your WordPress theme, you can use the "Additional CSS" option in the WordPress customizer. This option allows you to add custom CSS code that will be applied to your theme, and it can be accessed by going to the "Appearance" menu in the WordPress admin dashboard and selecting the "Customize" option.

Once you are in the customizer, you can navigate to the "Additional CSS" section, where you can add the CSS code shown above. This code will be applied to the theme, and it will hide the div element that has the color: red; inline style attribute.

Note that the CSS code shown above is just an example, and you may need to adjust the code based on the specific structure and elements of your WordPress theme. It may also be helpful to use the browser's developer tools to inspect the HTML elements and determine the best way to target the element that you want to hide.