trying to add margin-left to the input elements with type radio except the first one. But it is not applying. i tried using input[type=radio] also. How do I achieve this if first-of-type will not work with input element ?
<code><!DOCTYPE html>
<html>
<head>
<style>
input[name=qualification] {
margin-left: 3rem;
}
input[name=qualification]:first-of-type {
margin-left: 0rem;
}
</style>
</head>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type='radio' id='qual_ug' name='qualification' value='UG'>
<label for='qual_ug'>UG<label>
<input type='radio' id='qual_pg' name='qualification' value='PG'>
<label for='qual_pg'>PG<label>
<input type='radio' id='qual_phd' name='qualification' value='PhD'>
<label for='qual_phd'>PhD<label>
</form>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html>
<head>
<style>
input[name=qualification] {
margin-left: 3rem;
}
input[name=qualification]:first-of-type {
margin-left: 0rem;
}
</style>
</head>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type='radio' id='qual_ug' name='qualification' value='UG'>
<label for='qual_ug'>UG<label>
<input type='radio' id='qual_pg' name='qualification' value='PG'>
<label for='qual_pg'>PG<label>
<input type='radio' id='qual_phd' name='qualification' value='PhD'>
<label for='qual_phd'>PhD<label>
</form>
</body>
</html>
</code>
<!DOCTYPE html>
<html>
<head>
<style>
input[name=qualification] {
margin-left: 3rem;
}
input[name=qualification]:first-of-type {
margin-left: 0rem;
}
</style>
</head>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type='radio' id='qual_ug' name='qualification' value='UG'>
<label for='qual_ug'>UG<label>
<input type='radio' id='qual_pg' name='qualification' value='PG'>
<label for='qual_pg'>PG<label>
<input type='radio' id='qual_phd' name='qualification' value='PhD'>
<label for='qual_phd'>PhD<label>
</form>
</body>
</html>
Thank you for any guidance.