How to Select First 2 <Li> Elements Using CSS

How to select first 2 a elements in table using css

ul#main_header > li:nth-child(1) > a,
ul#main_header > li:nth-child(2) > a {
    background-color: red;
}

The above CSS won't select "Abenteuer" nor "Action" because both of those are
2nd-degree descendants of the <li>, rather than immediate children of the <li>, whereas > is the child combinator which only selects immediate children.

How to select only first three elements with CSS

You can do it like this:

section > figure:nth-child(-n+3) {background: Aqua}

<section>
  <figure>1</figure>
  <figure>2</figure>
  <figure>3</figure>
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>

How to select only the first child of only the second li element

You can achieve this using the :nth-child/:nth-of-type pseudo selector.

edit apparently browser support is now pretty solid, minus IE8. http://caniuse.com/#feat=css-sel3

edit 2 apparently there is an issue with nth-child on iOS 8 ( iOS8 Safari after a pushState the :nth-child() selectors not works ), so nth-of-type is the more stable option.

 li:nth-of-type(2) .item1-class{
      //your styling here
 }

How to select first a element of li with CSS?

You want to use div.footermenu li.expanded > a:first-child

jsFiddle

http://jsfiddle.net/eRTV6/

div.footermenu li.expanded > a:first-child {
    font-weight: bold;    
}

Your original selector will select all anchor elements which are first-children of li.expanded, by adding a direct descendant selector, >, you specify that you only want to select the first, direct descendant of li.expanded which are anchors.

How to select first N elements with jquery?

You don't need an if - you can use the jQuery :lt() selector

$('ul li:lt(3)').mouseenter(function(){});

Note that the index is zero-based, so the first three are 0, 1 and 2

http://api.jquery.com/lt-selector/

Update July 2020:

As of jQuery 3.4, the :lt pseudo-class is deprecated. Remove it from your selectors and filter the results later using .slice(). For example, :lt(3) can be replaced with a call to .slice(0,3)

Select first n li elements inside div from enitre page

$('.abc').each(function(index,el){
    var selectedDiv = $(el).find('li');
   selectedDiv =  selectedDiv.slice(0,2);
})

You can check here

http://jsfiddle.net/gn3q6oqu/1/

How to select the first li in an unordered list?

Keep in mind that to recolor the link, you want to not only select the first <li> element, but also the <a> inside it (as links don't automatically inherit the color of their parent element).

li:first-child a {

  color: red;

}

<ul id="main-nav">

  <li>

    <a href="#" class="nav-links">

      <i class="fas fa-home"></i>Home</a>

  </li>

  <li>

    <a href="#about" class="nav-links"><i class="fas fa-info-circle"></i>About Me</a>

  </li>

  <li>

    <a href="#portfolio" class="nav-links"><i class="fas fa-image"></i>Portfolio</a>

  </li>

  <li>

    <a href="#contact" class="nav-links"><i class="fas fa-envelope"></i>Contact</a>

  </li>

</ul>

how can style be added to the first 2 list elements using CSS

Try this way

 #list1 li:first-child
{

//styles//
}
#list1 li:first-child+li
{
  //styles//

}