How to hide the first element on the page with particular css class? [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

In CSS (not javascript), how can I hide the first element with a particular class, but not the other elements? See example below:

<div class="wrap">
  <center>
    <a href="" class="button">hide this one</a>
  </center>
<div> Some other stuff</div>
  <center>
    <a href="" class="button">don't hide this one</a>
  </center>
</div>

How would I hide the first element with the class of button?



Solution :

One option would be to use the nth-of-type selector:

.button:nth-of-type(1) {
  display:none;
}

Note: This selector is supported in IE9+, Chrome, Firefox, Safari and Opera (but not older versions of IE).

Also, it's time to remove the <center> tags. They have been removed as of HTML5.

Replace it with the equivalent CSS:

a.button {
  text-align:center;
}

Here's a working jsFiddle.


    CSS Howto..

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    How to add / remove html elements and content based on the browsing device?

    html5, how to style Figure differently for different case?

    CSS: How to force floating blocks to have equal (100%?) height

    CSS to keep middle image in 100% width slideshow always in center

    How do I center align a div that contains floated elements?

    How to fade between classes in a conditional query

    How to force Jade not to indent block tag?

    how to route to css/js files in mvc.net

    How to remove the extra space between two span elements?

    How can I select an nth element without knowing the element in CSS?

    How to write below CSS lines in zend framework 2 syntax?

    How can I remove/cover up a section of a border?

    How to avoid css and scripting effect when input on textbox

    How do I disable position:fixed in web pages?

    How would I make this into an dynamic :nth-child css selector [duplicate]

    How do I create a border for an image?

    HTML/CSS: How do I make an input field with 2 vertically positioned buttons next to it?

    How to change text color for link in tr element with CSS

    How to Clear Every Third Box in a Row? [duplicate]

    Not floating on same line, how to fix css

    How could I achieve the same navigation using CSS3? (currently flash AS3)

    SMACSS and BEM: How to position Module inside of a Module?

    how to remain the style of GUI component after disabling it in javafx?

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to load external css in CakePHP?

    How to specify a flex item to be of certain minimum width?

    How to fix this arrow shape created using CSS in IE9

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    how to replicate pinterest.com's absolute div stacking layout [closed]