|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style type="text/css"> .red:nth-of-type(3) { border:5px solid red; } </style> <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> |
And another way is: -
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> p:last-child { background:#ff0000; } </style> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> |
Adding Menu border
I added vertical lines in a menu as shown below: –
Use this code: –
|
1 2 3 4 5 6 |
.menu-item { border-left: solid 2px #fff; margin: 0 -4px; } |
To just target the end line I could use the following: –
|
1 2 3 4 5 |
.menu-item:last-child { border-right: solid 2px #fff; } |
to target the second from last I would use: –
|
1 2 3 4 5 |
.menu-item:nth-last-child(2) { border-right: solid 2px #fff; } |
