Maurice Cunningham Maurice Cunningham - 6 months ago 7
HTML Question

How to select a great grandchild of an element by its id

I'm supposed to be removing images of graffiti off of a wall. The exercise is supposed to help teach me how to use selectors in different ways. The tricky bit is that I am competing with a second style sheet and I am trying to make a new style sheet to remove the images of graffiti.

This is the relevant code I am working with:

<div id="wall">
<div class="parent">
<div></div>
<div>
<div id="tag-6"></div>
</div>
</div>


So what I need to do is select

<div id="tag-6"></div>


I understand that I am selecting a great grandchild of
<div id="wall">
I even understand that it is not the first child but everything I have tried so far does not work.

This is what my CSS looks like:

#wall .parent > div > div {
display: none;
}


I also looked up the solution to this problem and it looked like this:

body div#wall div.parent div:last-child div#tag-6 {
display: none;
}


Yet when I copied and pasted this CSS code into my stylesheet, it did not work. Can anyone help me out?

Answer

if it has an ID, you don't need any combined selectors, just use #tag-6 as a selector

#tag-6 { display: none; }

Addition after edit of question:

Just make sure your own stylesheet is referenced after the stylesheet whose styles you want to overrule.

Comments