How to Hide Only the First Element of a Type

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

You have a few different options:

Use the :first-of-type pseudo class to select the first element of type:
```
.ctr-1 > h3:first-of-type {
  display: none; 
}
```
Or use the :nth-of-type(n) pseudo class and specify the index of the first element:
```
.ctr-1 > h3:nth-of-type(0) {
  display: none; 
}
```
If type doesn't matter, and you always want to select the first child, use the :first-child pseudo class:
```
.ctr-1 > h3:first-child {
  display: none; 
}
```

How do I hide only the first element of a parent class

Move your title and sub-title outside the parent div and fix your typo in your selector and it will work:

first-child is the first element inside it's parent (not the first element with a class name)

.shwonlyclick {
  display: none;
}

.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
  display:block;
}

<div>title</div>
<div>sub title</div>
<div class="asd">
  <div class="delfirstdiv">
    <p class="shwonlyclick">Show this</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
  <div class="delfirstdiv">
    <p class="shwonlyclick">Hide</p>
  </div>
</div>

Hide first li element

Max compatibility:

.main-nav li {
    display: none;
}
.main-nav li + li {
    display: list-item;
}

Less compatibility, but not too bad:

.main-nav ul li:first-child {
    display: none;
}

Hide the first div with specific class

CSS Based Solution:

With CSS, there is no direct way to do this as far as I am aware. However, you can do the below as a work-around solution.

fieldset .leftAddress {
    display:none;
}
fieldset .leftAddress ~ .leftAddress {
    display: block;
}

Explanation: The first rule sets the display as none for all elements with .leftAddress class under the fieldset and then the second one sets display to block for all elements with .leftAddress class which also has a preceeding sibling with the same class. Thus in total, the first element with class as .leftAddress remains hidden.

CSS Solution Demo

Note: As pointed out by xec in comments, the CSS solution works only when used on elements which are siblings. If they are not and say there is one element with class='leftAddress' inside a wrapper (another level) within the fieldset, both the first .leftAddress in the fieldset and the first .leftAddress within the wrapper in the fieldset will get hidden (like here).

So, in essence it hides the first element with that class within the same parent.

Javascript Based Solution:

If you don't have any problems with using Javascript to achieve this effect, you can do it using the below code. This solution doesn't have the limitation mentioned in the CSS based solution (sample can be seen here).

window.onload = function(){
    document.getElementsByClassName('leftAddress')[0].style.display = 'none';
}

document.getElementsByClassName('leftAddress')[0] - Gets the first element in the DOM with class name as leftAddress. The [0] is mandatory because getElementsByClassName returns a list of nodes (as the plural name suggests) and hence we have to reference it like we do with any array.
style.display = 'none' - Javascript equivalent of the CSS display: none.

JS Solution Demo

Note: As mentioned in Point 1, this currently hides the first element with that class within the entire document. If you want to restrict it to the first element with that class within the fieldset, that can also be done.

Hide every div (inside ul/li) with CSS selector except first one

Inside your selector use the :not(:first-child) pseudo-class on the ancestor li to exclude the first <li> in a list from matching the selector - even though the style-rule ultimately affects only div.rpwwt-post-excerpt elements.

Like so:

li:not(:first-child) div.rpwwt-post-excerpt {
    display: none;
}

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

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.