I have created a dummy code example that generates multiple paragraph elements with some text in it. However, I need to add borders to the first and last elements to enhance the design. Here is the code snippet:
<!doctype html>
<html>
<head>
<style>
p {font-size: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var body = document.getElementsByTagName('body')[0],
p = document.createElement('p'),
el;
p.style.height = '20px';
p.innerText = 'Some Test';
for (var i = 0, len=30; i<len; i++) {
el = p.cloneNode(true);
body.appendChild(el);
}
};
</script>
</body>
</html>
Unfortunately, the CSS solutions I've found so far don't work as intended. I need a solution that specifically targets the first and last elements, and works in Chrome. Any suggestions on how to achieve this?
EDIT: Some of the suggested CSS solutions include:
p:nth-child(1){
border-top : solid 1px gray;
}
p:last-child{
border-top : solid 1px gray;
}
or
p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}
However, these solutions apply the styles to all paragraph elements, not just the first and last ones. I need a solution that targets only the first and last elements, and works specifically in Chrome.