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 change class of valid form field - jQuery form validation plugin

    how to prevent vertical Stepdown

    How to set vertical align middle for a div enclose another div

    how to use inline css in master pages

    Cakephp how to remove underline on links

    CSS - How to set margin-left dynamically with a fixed value

    How can I adjust the Wordpress Twentyeleven theme so that the page width is 100% and centered?

    How to apply pseudo-element styling to specific class only?

    How to flow text from a box to another with CSS

    How do I join my list and div using css?

    How to apply background color with css to text with line break [duplicate]

    image shows ui-button over the button image

    How to make an equal distance between elements footer?

    How to select an UNTAG element in CSS

    How to use printer friendly function with CTRL+p?

    How to create a pattern overlay on top of an image

    Change how CSS border edges meet? [duplicate]

    How to get style of a div from javascript file

    Content attribute in CSS to show image icon

    How to prevent Float contents overlap other contents below

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How is the “greater than” or “>” character used in CSS?

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • jQuery how to click a pseudo class element :after [duplicate]

    How to let users have the latest non cached code?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    jquery .show() from only the selected div

    GWT - How to create a drop down menu

    How to lazyload svg image given in css?

    How to fix background image inside div