How to apply some styles to first and last element

I have the following dummy code:

<!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>

It's render some

elements and on page preview it looks like the following: enter image description here

I need to add borders to first and last elements to be like the following: enter image description here

Is it possible to make by using CSS and to get work in webkit?

EDIT: To everyone who advise the following css

p:nth-child(1){
 border-top : solid 1px gray;
}
p:last-child{
   border-top : solid 1px gray;
}

p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}

That dont's work for me because it works accross all pages and looks like this: enter image description here

I need to work in chrome

标签： javascript css printing page-break-inside

4条回答

不美不萌又怎样

2楼-- · 2019-06-18 16:55

If you do not give a damn about old browsers. Then this will work for you...

@media print
  {
      p:nth-child(1){
          border-top : solid 1px gray;
      }
      p:last-child{
          border-bottom : solid 1px gray;
      }
  }

But if you want this to work with older browsers(especially IE) you'll have to use some JS technique.

0人赞添加讨论(0) 举报

Root（大扎）

3楼-- · 2019-06-18 16:57

You can use two containers and place one at the top of the page and the other one at the bottom. These containers must be placed in position:fixed and they will print in every page. This will work in Firefox, Opera and Internet Explorer but not in webkit browsers.

Demo here

After a few tests, I think the best values for your CSS are the following:

#top {
  height: 2px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid #000;
}
#bottom {
  height: 2px;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 1px;
  border-top: 1px solid #000;
}
p {
  padding-top: 20px;
}

and your HTML:

<div id="top"></div>
<div id="bottom"></div>
<p>abc</p>
<p>abc</p>
.....

0人赞添加讨论(0) 举报

Fickle 薄情

4楼-- · 2019-06-18 17:08

Try first-child and last-child.

For Instance,

p {font-size: 20px;}
p:first-child {...} /* Add your desired style here */
p:last-child {...} /* Add your desired style here */

0人赞添加讨论(0) 举报

在下西门庆

5楼-- · 2019-06-18 17:11

A more complicated solution would be to calculate the viewable page height (JavaScript, jQuery or the like) for each user and check how many items fit onto one page. Afterwards you can style the desired elements (nth-child(x)). Not the best solution but might work if you have conrete requirements (as a certain browser, OS, ...)

EDIT:

A possible solution could be: http://jsfiddle.net/VKDVd/

HTML: Just a few place-holder divs... Pay attention that you have set your doctype (otherwise $(window).height() will not work properly!)

JavaScript/jQuery:

$(document).ready(function () {

    // when including images in your side you should use $(window).load(function() {[...]} to make sure they are completely loaded before the script calculates the heights

    var pageHeight = $(window).height(); // JS-only and IE-compatible solution see my answer
    var sumElementHeights = 0;
    var count = -3; // ensures that the black border is inside the viewport

    for (var i = 0; i < $('div').length && sumElementHeights < pageHeight; i++, count++) {
        sumElementHeights += $('div').eq(count).height(); // sums up the div heights
    }

    $('div').eq(0).css('border-top', '10px solid black');
    $('div').eq(count).css('border-bottom', '10px solid black');
    // you could add a loop here for each page individually...       
});

PS: You could also add further code that updates the div borders if the viewport size changes (e.g. if the user resizes the browser window).

PPS: You can also play around with the numbers for count - as it certainly depends on the borders you add to the elements.

0人赞添加讨论(0) 举报

How to apply some styles to first and last element

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间