Yogesh Chauhan's Blog

How to apply style only to first child and/or only to children other than the first child?

in CSS on August 7, 2020

CSS :first-child Selector

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

CSS Syntax


:first-child {
  css declarations;
}

Use this code to select and style every i element of every p element, where the p element is the first child of its parent:


p:first-child i {
  background: green;
}

To select and style the first li element in lists, use this code:


li:first-child {
  background: green;
}

If you want to select and style the first child element of every ul element, use this code:


ul > :first-child {
  background: green;
}

How to select all children other than the first one?

CSS Syntax


:not(:first-child) {
  css declarations;
}

Use this code to select and style every i element other than the first child of every p element. Same example as above but with NOT first child.


p:not(:first-child) i {
  background: green;
}

To select and style all the li elements other than the first in lists, use this code:


li:not(:first-child) {
  background: green;
}

If you want to select and style all the children other than the first of every ul element, use this code:


ul > :not(:first-child) {
  background: green;
}

All modern browsers where CSS selectors level 3 are supported. Read More on w3.org


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to embed YouTube or other video links in WordPress?WordPress10 Usability Blunders to AvoidUI/UXRendering Elements in ReactReactAlternate Style Sheets in CSSCSSHow to Secure Web or Mobile Browsers?MiscellaneousWordPress get_posts ExamplesWordPress