CSS selects the first one of the same name

CSS Selecting the First of the Same Class

In CSS, sometimes we need to select the first element of the same class name and apply special styling. This is often encountered in real-world development, such as adding special styling to the first element in a list or the first link in a navigation bar. This article will detail how to use CSS selectors to achieve this functionality.

1. Use the :first-child pseudo-class to select the first element of the same class name.

:first-child The pseudo-class selects the first child of a parent element. We can use this feature to select the first element with the same class name. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element with the same name</title> 
<style> 
.item:first-child { 
color: red; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:


CSS selects the first of the same name

In the example above, we added the item class to the element. The :first-child pseudo-class selector is used, and the color is set to red. This selects the first element of a given type and applies special styles.

2. Use :nth-of-type to select the first element of a given type.

In addition to using the :first-child pseudo-class, we can also use the :nth-of-type selector to select the first child of a given type under a parent element. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element of the same name</title> 
<style> 
.item:nth-of-type(1) { 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS selects the first of the same name

In the above example, we use the :nth-of-type(1) selector to select the first element of the same name item and set the font style to bold.

3. Use :first-of-type to select the first element of the same type

In addition to using :first-child and :nth-of-type In addition to pseudo-classes, we can also use the :first-of-type selector to select the first child element of a specified type under the same parent element. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Selects the First Element of the Same Name</title> 
<style> 
.item:first-of-type { 
background-color: lightblue; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS Select the First of the Same Type

In the example above, we use the :first-of-type selector to select the first element of the same type named item and set its background color to light blue.

4. Use JavaScript to Dynamically Add Classes to Select the First Element of the Same Type

Sometimes, we need to dynamically select the first element of the same type for styling based on user actions or other conditions. We can use JavaScript to achieve this. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Selects the First Element of the Same Name</title> 
<style> 
.item:first-child { 
color: red; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
<button onclick="addSpecialStyle()">Add Special Style</button> 
<script> 
function addSpecialStyle() { 
document.querySelector('.item:first-child').style.fontWeight = 'bold'; 
} 
</script> 
</body> 
</html>

Output:

CSS Select the First of the Same Name

In the above example, we dynamically add a special style using JavaScript. When the user clicks the button, the first element of the same name, item, is bolded.

5. Use :not to Select Elements Except the First One of the Same Name

Sometimes we need to select elements other than the first one of the same name for styling. In this case, we can use the :not selector to achieve this. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Selects the First Element of the Same Name</title> 
<style> 
.item:not(:first-child) { 
color: blue; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS Select the First of the Same Name

In the example above, we use the :not(:first-child) selector to select all elements in the same class named item except the first one and set the color to blue.

6. Use :nth-child to Select the First of the Same Name

In addition to the :first-child pseudo-class, we can also use the :nth-child selector to select the first child of a parent element. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element of the same name</title> 
<style> 
.item:nth-child(1) { 
font-style: italic; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS Select the First of the Same Name

In the above example, we use the :nth-child(1) selector to select the first element in the same class named item and set the font to italic.

7. Use :nth-last-child to select the last child of the same class name

In addition to the :first-child and :nth-child pseudo-classes, we can also use the :nth-last-child selector to select the last child of the same parent element. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element of the same name</title> 
<style> 
.item:nth-last-child(1) { 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS Select the First of the Same Name

In the above example, we use the :nth-last-child(1) selector to select the last element of the same name item and set the text underline style.

8. Use :nth-child(n) to select the nth element of the same name

In addition to selecting the first element, we can also select the nth element of the same name, where n is an integer. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element of the same name</title> 
<style> 
.item:nth-child(2) { 
background-color: lightgreen; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
</body> 
</html>

Output:

CSS Select the First of the Same Name

In the above example, we use the :nth-child(2) selector to select the second element of the same name item and set the background color to light green.

9. Use :nth-child(odd) to select odd-numbered elements of the same name

In addition to selecting elements at a specified position, we can also select elements at odd positions under the same name. This can be achieved using the :nth-child(odd) selector. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS selects the first element of the same name</title> 
<style> 
.item:nth-child(odd) { 
color: purple; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
<div class="item">Item 4</div> 
</body> 
</html>

Output:

CSS selects the first of the same name

In the example above, we use the :nth-child(odd) selector to select the odd-numbered elements within the same element named item and set the color to purple.

10. Use :nth-child(even) to Select Even-Numbered Elements of the Same Name

Similar to selecting odd-numbered elements, we can also select even-numbered elements of the same name using the :nth-child(even) selector. Here is a sample code: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Selects the First Element of the Same Name</title> 
<style> 
.item:nth-child(even) { 
background-color: lightyellow; 
} 
</style> 
</head> 
<body> 
<div class="item">Item 1</div> 
<div class="item">Item 2</div> 
<div class="item">Item 3</div> 
<div class="item">Item 4</div> 
</body> 
</html>

Output:

CSS selects the first of the same name

In the example above, we use the :nth-child(even) selector to select even-numbered elements within the same element named item and set the background color to light yellow.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *