Method 1: Using :first-of-type
Css rule 'div:first-of-type' targets only the first <div>.
Eg: example of css that sets the background color of all <div> elements to yellow, except for the first <div>:
You can replace transparent with another color if you want the first <div> to have a specific background color different from the rest.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
div {
background-color: yellow;
}
div:first-of-type {
background-color: transparent; /* you can change this to any color you want */
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<div>Fourth div</div>
</body>
</html>
Outputs:
Method 2: Using the :not() Selector:
Eg:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
div:not(:first-of-type) {
background-color: yellow;
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<div>Fourth div</div>
</body>
</html>
Outputs:
Method 3: Using the nth-child Selector:
This approach applies yellow to all <div> elements, and then overrides the first one using nth-child(1).
Eg:
div {
background-color: yellow;
}
div:nth-child(1) {
background-color: transparent;
}
Method 4: Using the General Sibling Selector:
The general sibling selector '~ 'applies yellow to all <div> elements that follow the first one.
Eg:
div {
background-color: yellow;
}
div:first-of-type ~ div {
background-color: yellow;
}
Examples:
Eg: disabling all anchor tags except for the first one, in a div:
CSS alone cannot fully disable a link, but you can make it non-clickable and style it to look disabled.
Note: non-clickable does in fact 'disable' the link because you make unclickable, but anchor link is still there.
The pointer-events: none; disables interaction with the anchor tags.
The first link retains its normal styling using pointer-events: auto;.
The 'cursor: not-allowed;' gives a visual cue that the link is disabled.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
div a {
pointer-events: none;
color: gray;
cursor: not-allowed;
}
div:first-of-type a {
pointer-events: auto;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<a href="#">First Link (Enabled)</a>
</div>
<div>
<a href="#">Second Link (Disabled)</a>
</div>
<div>
<a href="#">Third Link (Disabled)</a>
</div>
<div>
<a href="#">Fourth Link (Disabled)</a>
</div>
</body>
</html>
Outputs:
Eg2: you can use jquery to fully disable all anchor tags except the first one:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('div a').not(':first').each(function() {
$(this).attr('href', '#'); // removes the original href or set it to a dummy link
$(this).css({
'pointer-events': 'none', // disable click interaction
'color': 'gray', // optional: style as "disabled"
'cursor': 'not-allowed' // change cursor style
});
});
});
</script>
</head>
<body>
<div>
<a href="http://andrewsin.net">First Link (Enabled)</a>
</div>
<div>
<a href="http://andrewsin.net">Second Link (Disabled)</a>
</div>
<div>
<a href="http://andrewsin.net">Third Link (Disabled)</a>
</div>
<div>
<a href="http://andrewsin.net">Fourth Link (Disabled)</a>
</div>
</body>
</html>
Outputs:
Eg3: you can use javascript to fully disable all anchor tags except the first one:
<script>
document.querySelectorAll('div a:not(:first-of-type)').forEach(link => {
link.href = '#'; // removes the original href or points to a dummy location
link.style.pointerEvents = 'none'; // disables the click
link.style.color = 'gray'; // optional: styles it as "disabled"
link.style.cursor = 'not-allowed'; // changes cursor style
});
</script>
