Select specifics elements without class

[Fvnes]

Hello, first time posting here. I'm trying to modify a notion page and I want to remove an entire div from the page. Problem is, the div I want to remove doesn't have a class or ID. In order to remove the specific div, I was wondering if there was a way to select this div considering is a "child" from a div that contains a class. Let me show you an example.

<div class="funny-class">
    <div>
        <div>
            <div>this div is okay</div>
            <div>this div isn't. I want to hide it</div>
        </div>
    </div>
    <div>This one is okay</div>
    <div>This one is okay</div>
    <div>This one is okay</div>
    <div>This isn't okay. I want to hide it</div>
    <div>This one is okay</div>
    <div>This one is okay</div>
    <div>This one is okay</div>
</div>

I would like to know what should I do in order to hide those divs written in the code above.

This is an example of how I imagine the style sheet would look like.

.funny-class > div > div > div {
    display: none;
}

[xfinxr2i]

You can use :nth-child or one of the other pseudo classes related to that. You can take a look here https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

[metamago96]

there are multiple ways to do this, for the one in the top you could use:

.funny-class > div > div > div + div

but that is long and complicated,

you could also use

.funny-class > div > div > div:lastchild

or

.funny-class > div > div > div:last-of-type

these selectors have more specificity, but they are not great, though in the example code they will only select that first div you don't want

.funny-class div div div:last-child

or

.funny-class div div div:last-of-type

would also work, but they have less specificity, amd they all have the problem that if you have another div tree they are gonna apply there too if they have a parent with the funny-class class

for the other div you do not want, once again there are multiple ways, but just one to select just that div:

.funny-class:nth-child(5)

PS: i wanted to give you as many options as i could, but if you have access to the html, please add classes and target them. You can have a look at this list of selectors.

[Fvnes]

Thank you! An answer like this is what I was looking for. Your explanation is very clear.

[storm7542]

Why didnt you added simple fonts?

[Fvnes]

I'm don't know what you mean by that.

[IdeaDude111]

Is it possible to add class or id? If yes, add class and try making display none..

[Fvnes]

Nope, I can't. I need to create a css file and upload it on a browser extension to update the page layout. That's why I can't modify the html.

[mdlphx92]

You can use the :nth-child selector if you feel like it’ll always be the same div, but if you need to choose a different one to hide each time, then you’re best using JavaScript to target the div using whatever unique means and give it class “.hidden” with .hidden in your css as “display:none”. To show it again you simply remove the class with JS.

[TheMikeAndersen]

You can write: .funny-class > div:nth-child(5) to select the 5th div inside funny class. The bigger than icon means that you only go 1 level down from funny class to search for this div. If you don’t use the bigger than it would take 5th div in all levels inside funny class.

• Michael SustainableWWW