YogeshChauhan.com
How to apply style to a specific child element using CSS?
October 15, 2020


Similar Post: How To Apply Style Only To First Child And/Or Only To Children Other Than The First Child?

We can use different selectors in CSS to style specific child elements.

Apply style to the first child element


li:first-child {
  background: green;
}

Apply style to the last child element


li:last-child {
    background: green;
}

Apply style to the second last child element


li:nth-last-child(2) {
    background: green;
}

Apply style to nth child element


// 2nd child

p:nth-child(2) {
  background: red;
}

// 4th child 

p:nth-child(4) {
  background: red;
}

Apply style to all child elements other than the first one


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

Apply style to all child elements other than the first two


li:nth-child(n+2) {
    background: green;   
}

Apply style to all odd child elements


li:nth-child(odd) {
    background: green;   
}

 Apply style to all even child elements


li:nth-child(even) {
    background: green;   
}

Apply style to first two child elements


li:nth-child(-n+2) {
    background: green;   
}

Apply style to all but skip the first two child elements


li:nth-child(n+2) {
    background: green;   
}
dreamhost

Leave a Reply

Most Read

#1 How to set opacity or transparency using CSS? #2 Pagination in CSS with multiple examples #3 How to check if radio button is checked or not using JavaScript? #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 How to add Read More Read Less Button using JavaScript?



Recently Posted

Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values? Feb 22 WordPress: How to print ACF array field values? Feb 21 WordPress: How to get field values in Advanced Custom Fields?



You might also like these

How to show slider value in HTML5 range input using JavaScript?HTMLPostgreSQL BETWEENPostgresCanvas Drawing in HTML5HTMLList of all Pseudo Elements in CSSCSSWhat are Modules and Components in Angular?AngularLearn to create profile card using HTML and CSSCSS