nth-child and nth-last-child pseudo-class

nth-child and nth-last-child pseudo-class

by Nguyễn Đình Quân

HTML

<div>
    <p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>
    <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>
    <p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
    <p><strong>Paragraph 4:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
    <p><strong>Paragraph 5:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
    <p><strong>Paragraph 6:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
    <div>

CSS

p:nth-child(2) {
    padding: 5px;
    background-color: #333;
    color: #fff;
}
p:nth-last-child(3) {
    padding: 5px;
    background-color: #073642;
    color: #CCC;
    font-style: italic;
}