- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use a not:first-child selector in CSS?
There are various selectors in CSS out of all those selectors, so use :not(:first-child) selector. We can very easily achieve this using the :not and :first-child selectors in a combination.
For example, if you want to select all paragraphs except the first one that are inside a div element, you can use div :not(:first-child) selector. In this article, we will learn how to use the :not(:first-child) selector in CSS. We will explore the different methods to use a :not(:first-child) selector.
Different Approaches to use :not(:first-child) Selector
There are different ways to use a use :not(:first-child) selector in CSS as mentioned below.
- Select all Children Except the First Child of an Element
- Select all Siblings Except the First Sibling of an Element
- Select all Elements Except the First Child of Their Parent
Selecting all Children Except the First Child of an Element
We are going to select all children except the first child of an element. In this method, we will use the :not(:first-child) selector that selects all the children except the first child of an element. We can use this selector simply by write the element's selector followed by the :not(:first-child) pseudo-class. See the syntax below.
Syntax
Below is the syntax for selecting all p elements except the first one in a div container.
div p:not(:first-child) {
/* Add all the CSS styles for all p
elements except the first one */
}
Example
In the given example, we are selecting all children except the first child of an element. Here except for the first p element, all the p elements will have the defined CSS styles as defined under the <style> tag.
<html>
<head>
<style>
div p:not(:first-child) {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all children except the first child of
an element
</h2>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>
At tutorialspoint, 40 million readers read
million pages every month.
</p>
<p>
Our Text Library Content and resources are
freely available and we prefer to keep it that
way to encourage our readers to accquire as many
skills as they would like to.
</p>
</div>
</body>
</html>
Select all siblings Except the First Sibling of an Element
We are going to select all siblings except the first sibling of an element. In this method, the :not(:first-child) selector is used to select all siblings except the first sibling of an element. As compared to the first method, this method is useful if we want to apply styles to all siblings of an element except the first one. We can do this just by writing the selector for the element's sibling followed by the :not(:first-child) pseudo-class. See the syntax below.
Syntax
Below is the syntax for selecting all li elements inside a <ol> list that is not the first child of their parent as it allows in applying the specific CSS styles to all li elements except the first one.
ul li:not(:first-child) {
/* Add all the CSS styles for all li
elements except the first one */
}
Example
In the given example, we are selecting all siblings except the first sibling of an element i.e., <li> in our case. Except for the first <li> element, all the other <li> will have the defined CSS styles as defined under the <style> tag.
<html>
<head>
<style>
ul li:not(:first-child) {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h2>
Using not:first-child selector to select
all siblings except the first sibling of
an element
</h2>
<div>
<ul>
<li>
Learn how to do data structures.
</li>
<li>
Learn how to do algorithms.
</li>
<li>
Learn how to do competitive programming.
</li>
</ul>
</div>
</body>
</html>
Select all Elements Except the First Child of Their Parent
We are going to select all elements except the first child of their parent. We can use the universal selector * followed by the :not(:first-child) selector. As far as now, we have seen the above two methods, this method is useful when we want to apply styles to all elements on a page except the first child of their parent. See the below syntax for more details.
Syntax
Below is the syntax for selecting all elements on a page that are not the first child of their parent. This allows us to apply specific styles to all elements except the first child of their parent.
*:not(:first-child) {
/* Add all the CSS styles for all elements
except for the first child of their parent */
}
Example
In the given example, we are selecting all elements on the page except the first child of their parent will have some styles. Here, all the elements except the first child of the parent element will have the defined CSS styles as defined under the <style> tag.
<!DOCTYPE html>
<html>
<head>
<style>
/* Remove :not(:first-child) from below code to check */
*:not(:first-child) {
margin: 10;
border: 2px solid blue;
}
</style>
</head>
<body>
<h4>
Using not:first-child selector to
select all children except the first
child of an element
</h4>
<div>
<p>Welcome to Tutorialspoint!</p>
<p>Simply Easy Learning</p>
<p>
Text Library Content and resources are
freely available and we prefer to keep
it that way to encourage our readers
acquire as many skills as they would like to.
</p>
</div>
<ul>
<li>Learn HTML, CSS and JavaScript</li>
<li>Learn Data Structure and Algorithm</li>
<li>Learn Data Science and Machine Learning</li>
</ul>
</body>
</html>
Conclusion
We have learned how to use a not:first-child selector in CSS. We have seen that the :not(:first-child) selector is a very powerful combination of two different selectors for styling web pages. This allows us to select all elements except the first child of their parent, making it easier to target specific elements.
1K+ Views
