Apply Style to First Element in a Row of Similar Elements

Apply style to first element in a row of similar elements

You use the :not() pseudo-class with an adjacent sibling combinator + to match an .A that is not immediately preceded by an .A:

:not(.A) + .A

You'll also need to use :first-child to select the very first .A element since it's not preceded by anything:

.A:first-child

Combine them, and you have:

:not(.A) + .A, .A:first-child { color: red; }

jsFiddle demo

change the style of only first element in an array of class elements using javascript

You can get the list of elements with class "listName", and change the first element of that list.

Javascript

window.onload = function(){
   // Get elements with class name 
   var elements_array = document.getElementsByClassName("listName");
   // Change first element
   elements_array[0].style.display = "block";
}

window.onload = function(){
  // Get elements with class name 
  var elements_array = document.getElementsByClassName("listName");
  // Change first element
  elements_array[0].style.display = "block";
}

.listName {
    display: none;
 }

<html>
  <body>
    <div class="listHolder">
      <ul class="list">
            <li>
              <span class="listName">Macbook</span>
            </li>
            <li>
              <span class="listName">Amazon Firestick</span>
            </li>
            <li>
              <span class="listName">Keyboard</span>
            </li>
            <li>
              <span class="listName">Headphones</span>
            </li>
            <li>
              <span class="listName">Airpods</span>
            </li>
        </ul>
    </div>
  </body>
</html>

Select all 'tr' except the first one

By adding a class to either the first tr or the subsequent trs. There is no crossbrowser way of selecting the rows you want with CSS alone.

However, if you don't care about Internet Explorer 6, 7 or 8:

tr:not(:first-child) {
    color: red;
}

How to I apply a style to only the first row (matching a class) of a table using pure css?

You can do it like this, with the selector .highlighted ~ .highlighted, and applying a display:block to your <tr>. Here is the updated jsFiddle

.highlighted {
    display:block;
    border-top:1px solid lightgrey;
    background-color:lightyellow;

}
.highlighted ~ .highlighted {
    border:0;
}

What that does is the .highlighted applies to the first one, and the .highlighted ~ .highlighted applies to everything but the first one

Apply style to cells of first row

Use tr:first-child to take the first tr:

.category_table tr:first-child td {
    vertical-align: top;
}

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

How to select the first element of n 4 elements with CSS only?

I waited for half an hour so that maybe someone would find the answer, but this is the only thing I came up with, and it's problem is that it doesn't work for a "> n", but it works for a "= n". i.e it works only for a specific number, so it's half way what you asked for

li:first-child:nth-last-child(4) {
    /* Whatever here */
}

http://jsfiddle.net/g3PDw/

EDIT:
Dude I nailed it. This one works perfectly
http://jsfiddle.net/g3PDw/9/

li:first-child:nth-last-child(n+5)

Apply Style to First Element in a Row of Similar Elements