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


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to check “IF any one or all buttons are clicked” in jquery

    How to edit itemprop in div class in CSS? (Wordpress)

    How do i position a div relative to the window page (responsive css)

    How to resize a div on drag? [Issue with rotation]

    how to write css to reduce font size [duplicate]

    how to create a rotateY animation via jQuery and css 3

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

    How to prevent page from jumping on menu open?

    How to make background image on hover have a transition effect without default background image?

    How can I import a single string line of text to multiple HTML files?

    How to create transparent background color in html & css [duplicate]

    how to except all elements css inside div with class?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    How can I rotate a font icon 45 degrees?

    Bootstrap: How to get part of my banner image to hide under my sidebar?

    How to properly display content when I resize the window?

    How can I track down a:hover jquery source?

    Bootstrap: navbar showing a line

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How to get 2 fixed and 1 dynamic column in CSS

    How to use css for the hover effect in another div?

    How can i edit font-size and font-family option in css file using sed?

    How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen

    How to make image control button for each image inside the div using css and js?

    How to set jquery ui icon as background image per css?

    How to change checkbox's border style in CSS?

    how to make a input tag takes the rest of a td space in css?

    How to hide a div off the viewport responsively, and always showing the bottom 50px?