I have designed a basic <ul> list in HTML and applied different margin-right values to each of the <li> elements using CSS (jsFiddle). Here is the HTML code:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
CSS:
ul {
padding: 0px;
margin: 0px;
}
ul li {
display: inline-block;
}
ul li:first-child {
margin-right: 10px;
}
ul li:nth-child(2) {
margin-right: 20px;
}
ul li:nth-child(3) {
margin-right: 30px;
}
ul li:nth-child(4) {
margin-right: 40px;
}
ul li:last-child {
margin-right: 50px;
}
I am wondering if it is possible to change the margin-right value of the first-child <li> to match that of the second-child <li> using the jQuery snippet below:
jQuery('ul li:first-child').css('margin-right', '');
For example, if the first-child <li> has a margin-right of 10px and the second-child <li> has 20px, the jQuery should update the first-child <li> margin-right to 20px.