How do I hide only the first element of a type?

后端 未结 5 1262
一个人的身影
一个人的身影 2021-01-11 19:13

I have the following markup:

Title

Title

相关标签:
5条回答
  • 2021-01-11 19:47

    You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:

    .ctr-1 > h3:first-child{ display:none; }
    
    0 讨论(0)
  • 2021-01-11 19:57

    They are both technically the first-child.

    In your example, you could do:

    .ctr-1 > h3:first-child { display:none; }
    
    0 讨论(0)
  • 2021-01-11 19:58

    This is what the first-of-type and nth-of-type selectors are for.

    For example:

    .ctr-1 h3:first-of-type { display:none; }
    /* - Or - */
    .ctr-1 h3:nth-of-type(0) { display:none; }
    

    This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.

    Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.

    0 讨论(0)
  • 2021-01-11 19:59

    Like this:

    .ctr-1 > h3:first-child {
        display:none; 
    }
    

    jsFiddle here

    0 讨论(0)
  • 2021-01-11 20:06

    You can use:

    .ctr-1 > h3 { display: none; }
    
    0 讨论(0)
提交回复
热议问题