I was testing JQuery's addClass() function when I noticed that the CSS properties defined for the .odd class applied to all links, not just odd links . The goal is to differentiate odd links from even ones by assigning different CSS properties for each set through the aforementioned function.
But then I noticed that it wasn't just the .odds class that was failing, but also #test_links to , since margin-left is applied correctly, but not margin-bottom .
I don't understand why these properties are not applied correctly. I leave the code here. Everything is in the same sheet except for the JQuery library, of which, in case it was relevant, I used version 3.6.0.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba 3</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#botones{
margin: 10px auto;
padding: 5px;
width: 50%;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: space-around;
}
#pares, #impares{
font-weight: bold;
}
#enlaces{
margin: 20px;
padding: 10px;
border: 3px solid black;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#enlaces a{
text-decoration: none;
color: black;
background-color: burlywood;
}
#enlaces_de_prueba a{
margin-left: 10px;
margin-bottom: 10px;/*NO FUNCIONA margin-bottom*/
}
/*NO FUNCIONA .impares o bien falla su llamada en el script de js*/
.impares{
color: chocolate;
margin-left: 20px;
}
</style>
<script src="C:\Users\DELL\Documents\VSC_Workspace\jquery.js"></script>
<script>
$(document).ready(
function(){
/*NO FUNCION la llamadao bien la clase está mal*/
$("#enlaces_de_prueba a:nth-child(2n+1)").addClass("impares");
}
);
</script>
</head>
<body>
<div id="enlaces">
<a href="Prueba_1.html">Prueba_1</a>
<a href="Prueba_2.html">Prueba_2</a>
<a href="Prueba_3.html">Prueba_3</a>
</div>
<div id="botones">
<button type="button" id="pares">PARES</button>
<button type="button" id="impares">IMPARES</button>
</div>
<div id="enlaces_de_prueba">
<a href="https://www.google.es/" target="_blank">Google</a><br>
<a href="https://www.youtube.com/" target="_blank">YouTube</a><br>
<a href="https://www.instagram.com/" target="_blank">Instagram</a><br>
<a href="https://mail.google.com/mail/u/0/#inbox" target="_blank">Gmail</a>
</div>
</body>
</html>
Thanks for your attention.
You have a couple of problems that are causing you those errors that you mention, I will try to break them down for you:
.impares
is being successfully added to your bindings. If you check them with the element inspector of the browser's developer tools, you can see that all your tags<a>
are receiving the mentioned class. I understand that this is not what you intended, that you want it to apply only to links that are odd. The problem with this is that in addition to labels<a>
, the element#enlaces_de_prueba
has labels as daughters<br>
that happen to have an even position with respect to their parent. So by using the selector#enlaces_de_prueba a:nth-child(2n+1)
you are causing the class to apply to all links.To fix it I removed the tags
<br>
.margin-bottom
of the links#enlaces_de_prueba
is being applied correctly, but since these elements are not block elements, the browser ignores said rule.To solve it I made these links have
display: block
. Having removed<br>
this also causes the links to each go on a different line instead of all on the same line.The problem is that you're using the selector
a:nth-child
, which gets all children, regardless of their tag, and line breaks are also taken into account. You just need to change to a:nth-of-type to only apply to those that match the tag.Also, it can be achieved from CSS. In this code snippet it is shown only with CSS, but if you need to do it from Javascript, just remove it
, #enlaces_de_prueba a:nth-of-type(2n+1)
in the CSS rules and uncomment the Javascript block.Additionally, you cannot apply margin to labels that have the property
display: inline;
and you should only change it to another block-type value, in this case, itinline-block
is enough.To simplify your HTML, you can remove the line breaks (
<br>
) and put the propertydisplay: block;
, but that already depends on your requirements and preferences.