Updated June 12, 2023
Introduction to CSS first child of class
The following article provides an outline for CSS first child of class. It is defined as a selector for HTML that selects the parent’s first-child element (has a Relationship between parent and sibling content), which is used in CSS. It Simply targets the first element inside another element and is a pseudo-class means it falls under structural and position-based classes. The Selectors play a vital role in CSS as they determine the styles of elements in the HTML code. The first targets only one element, whereas the first-child targets more than one but with one parent. Here is the <!DOCTYPE> should be assigned for the Internet Explorer browser version.
Syntax of CSS first child of class
Given below is the syntax:
Element: first-child {
//css declarations with style properties;
}- argument element: It is the first of the parent.
- css: Styling properties applying to the first child.
Code:
<div class =" check">
<p> hi welcome to the website. </p>
<p> Open Home Page </p>We are now applying CSS Style to Paragraph one. We should use a first-child selector.
. check p: first-child
{
// CSS font style;
}To select a DOM element specifically, adding a new class within a stylesheet is beneficial, as it improves the clarity of the HTML code. We use child selectors, which can be either descendants or child selectors, and we can add the first-child or last-child selectors for this purpose. It’s a part of CSS2. So if a heading element is above the <p> element, then this no longer selects the paragraph.
What is CSS’s first child of class with Examples?
You can chain this first-child class with elements like “before” and “::after.”
Example #1
It is with a Paragraph tag <p >.
Here we apply the first-child selector to the Paragraph. The first <p> statements will be styled, and the following <p> tag content is not styled. We are creating a markup code and CSS file externally.
Code:
child.css
p:first-child {
color: yellow;
background-color: green;
padding: 2px;
}child.html
<html>
<head>
<link rel="stylesheet" href="child.css">
</head>
<div>
<p>Europe is considered to be a second smallest continent in the world and has total land of greenish sectors.</p>
<p>One among then is Switzerland.</p>
</div>
<div>
<h2>This topic is all about the European Country</h2>
<p>No selection</p>
</div>
</html>The above markup shows that inside the <div> tag, the child elements are <p> and <h2> if. If we changed the first <p> tag to another element, the selector first-child couldn’t take any child.
Output:
Example #2
With the row tag <tr>.
Suppose for the following HTML; the selector will apply styles to the Row tag, which is the element’s first child. In our case, Grocery and Address are the CSS styles. The rest of the <tr> is not selected because it is not the element’s first child.
Code:
child.css
tr:first-child {
color: red;
background-color: Powderblue;
font-family: courier;
padding: 3px;
border : 2px solid pink;
}
h2:
color : orange;
}child.html
<html>
<head>
<link rel="stylesheet" href="child.css">
</head>
<table>
<tr>
<th> Grocery Shop</th>
<th> Address </th>
</tr>
<tr>
<td>Big Basket</td>
<td>Hyderabad, chennai</td>
</tr>
<tr>
<td> D-Mart Grocery Items</td>
<td> Coimbatore</td>
</tr>
<tr>
<td>Walmart - Shopping HAll</td>
<td> Mumbai</td>
</tr>
</table>
</html>Output:
Example #3
The Class Attribute.
Here, the class name ‘Bank’ is assigned, and a paragraph calls it.
Code:
list.html
<!DOCTYPE html>
<html>
<head>
<style>
p.Bank {
background-color: yellow;
color: green;
}
</style>
</head>
<body>
<p class="Bank">BNP Paribas</p>
<p>Its an Biggest major Bank in France that serves retail and Depositor services.</p>
<p class="Bank">Bank Of America</p>
<p>Its a U.S Bank that provides Services for all the clients with the high Size.</p>
<p class="Bank">Bank Of China Ltd</p>
<p>Its an China bank which has the largest deposit in the world.</p>
</body>
</html>Output:
Example #4
Implementing in list element.
In the below code, the: first-child is targeted to the un-ordered list items.
Code:
list.html
<!DOCTYPE html>
<html>
<head>
<title> First Child Selector On List</title>
<style>
h1 {
color:purple;
}
div ul:first-child {
background-color: magenta;
color:pink;
font-style:italic;
font-weight:bold;
width:50%;
margin-left:40px;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>EDUCBA- Online Course</h1>
<h2>First-Child Selector Demo</h2>
<div>
<ul style="margin-left:40px">
<li>PHP</li>
<li>AWS</li>
<li>SQL Server</li>
</ul>
<ul>
<li>Beginner</li>
<li> Intermediate</li>
<li>Advanced</li>
</ul>
</div>
</body>
</html>Output:
Example #5
In the demonstration below, the pseudo-class: first child is done with the tr, th, td element, which identifies the first child of tr as the Sno, Employee, designation…. and for the respective td element name.
Code:
emplist.html
<html>
<head>
<link rel="stylesheet" href="emplist.css">
</head>
<table>
<thead>
<tr>
<th>Sno</th>
<th>Employee</th>
<th>Designation</th>
<th>Service</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td> Mary Queraine</td>
<td>Senior Manager</td>
<td>10-12 </td>
<td>80000</td>
</tr>
<tr>
<td>6</td>
<td>Catherine Jay</td>
<td>Team Leader</td>
<td>5-6</td>
<td>50000</td>
</tr>
</tbody>
</table></html>emplist.css
table {
border-collapse: separate;
border-spacing: 0.2;
width: 95%;
}
th,
td {
padding: 5px 14px;
}
th {
background: #FF6347;
color: #c6c9cc;
text-align: left;
}
tr:first-child th:first-child {
border-top-left-radius: 4px;
}
tr:first-child th:last-child {
border-top-right-radius: 4px;
}
td {
border-right: 1.3px solid #FFA500;
border-bottom: 1.3px solid #FFA500 ;
}
td:first-child {
border-left: 1.2px solid #FFA500;
}Output:
Example #6
Implementation Using JavaScript.
The following code shows the outcome when we write: first-child in Java Script that selects only the first child to style the content.
Code:
fff.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>first-child Listing Names</title>
<style>
span {
color: yellow;
}
span.name {
color: red;
font-weight: bolder;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
<span>Mark,</span>
<span>Kaevin,</span>
<span>Vew Stonghen</span>
</div>
<div>
<span>Gimson,</span>
<span>Tanny Roy,</span>
<span>Sylvester</span>
</div>
<script>
$( "div span:first-child" )
.css( "text-decoration", "Underline" )
.hover(function() {
$( this ).addClass( "name" );
});
</script>
</body>
</html>Output:
Conclusion
Therefore, this article showed how to use CSS selector: first-child with the demo and syntax neatly. We could build successful websites with this selector, which could sometimes be challenging. And finally, it outlines the fundamentals and covers how front-end development implements this element in HTML elements, which proves highly beneficial.
Recommended Articles
We hope that this EDUCBA information on “CSS first child of class” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
