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 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 plays a vital role in CSS as they determine the styles to elements on the HTML code. The first targets only one element whereas first-child targets more than one but with one parent. Here the <!DOCTYPE> should be assigned for 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:
Html
<div class =” check”>
<p> hi welcome to the website. </p>
<p> Open Home Page </p>
Now applying CSS Style to the Paragraph one we are supposed to use first-child selector.
. check p: first-child
{
// CSS font style;
}
To pick a specific Dom element it is super to add a new class to do it inside a stylesheet which clears an HTML Code better. To do so Child selectors are been used which uses either descendants or child selectors. To this first child or last-child selectors are been added. Its a part of CSS2. So if there is a heading element above the <p> element then this no longer selects the paragraph.
What is CSS first child of class with Examples
This first-child class can be chained with the elements like: before and:: after.
Example #1
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. Creating a mark-up 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>
4.5 (5,607 ratings)
View Course
The above mark-up shows that inside the <div> tag the child elements are <p> and <h2>. If suppose if we made a change to 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 first child of the element. In our case, it is Grocery and Address which is styled by the CSS. The rest of the <tr> is not selected because it is not the first child of the element.
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 is assigned as ‘Bank’ which is called by a paragraph.
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 to be 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, in this article, we saw how to use CSS selector: first-child with the demo and syntax neatly. With this selector, we could build successful websites which could be challenging sometimes. And to the end, it outlines the fundamentals and covers how this element is implemented in HTML elements which is much beneficial for the front-end development.
Recommended Articles
This is a guide to CSS first child of class. Here we discuss the introduction and what is CSS first child of class with examples. You may also have a look at the following articles to learn more –
