Need to select the first-child

Question

I need to center the first a element only. Example : Text "Ajax" should be centered align, but text "Ajax Help" and Ajax Intro" should be left aligned. I need to implement it for all li element.

ul.child-sidebar-menu li.current_page_parent a:first-child {
    position: absolute;
    width: 100%;
    text-align: center;
}

<ul class="child-sidebar-menu">
 <li class="page_item page-item-21 current_page_ancestor current_page_parent has_children">
  <a href="http://localhost/html5beta/javascript/ajax/">Ajax</a>
 <ul class="grandchild-sidebar-menu level-0 children">
  <li class="page_item page-item-104 current_page_item">
   <a href="http://localhost/html5beta/javascript/ajax/ajax-help/" aria-current="page">Ajax help</a></li>
<li class="page_item page-item-54"><a href="http://localhost/html5beta/javascript/ajax/ajax-intro/">Ajax Intro</a></li>
</ul>
</li>
<li class="page_item page-item-16"><a href="http://localhost/html5beta/javascript/angular-js/">Angular JS</a></li>
<li class="page_item page-item-29"><a href="http://localhost/html5beta/javascript/jquery/">Jquery</a></li>
<li class="page_item page-item-31"><a href="http://localhost/html5beta/javascript/jason/">Jason</a></li>
<li class="page_item page-item-37"><a href="http://localhost/html5beta/javascript/react-js/">React JS</a></li>
<li class="page_item page-item-39"><a href="http://localhost/html5beta/javascript/node-js/">Node JS</a></li>
</ul>

score 2 · Accepted Answer · answered Jun 26 '19 at 04:18

You're looking for the child combinator > to only select the a elements that are direct children of li.current_page_parent, and not the grandchildren.

Note that you won't actually need the :first-child pseudo-class in this case.

ul.child-sidebar-menu li.current_page_parent > a {
  position: absolute;
  width: 100%;
  text-align: center;
}

<ul class="child-sidebar-menu">
  <li class="page_item page-item-21 current_page_ancestor current_page_parent has_children">
    <a href="http://localhost/html5beta/javascript/ajax/">Ajax</a>
    <ul class="grandchild-sidebar-menu level-0 children">
      <li class="page_item page-item-104 current_page_item">
        <a href="http://localhost/html5beta/javascript/ajax/ajax-help/" aria-current="page">Ajax help</a></li>
      <li class="page_item page-item-54"><a href="http://localhost/html5beta/javascript/ajax/ajax-intro/">Ajax Intro</a></li>
    </ul>
  </li>
  <li class="page_item page-item-16"><a href="http://localhost/html5beta/javascript/angular-js/">Angular JS</a></li>
  <li class="page_item page-item-29"><a href="http://localhost/html5beta/javascript/jquery/">Jquery</a></li>
  <li class="page_item page-item-31"><a href="http://localhost/html5beta/javascript/jason/">Jason</a></li>
  <li class="page_item page-item-37"><a href="http://localhost/html5beta/javascript/react-js/">React JS</a></li>
  <li class="page_item page-item-39"><a href="http://localhost/html5beta/javascript/node-js/">Node JS</a></li>
</ul>

Your other <li> elements don't have the .current_page_parent class, so you can either target .page_item > a if you want to target their (theoretical) children.

Need to select the first-child

1 Answers1