<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>CSS Pseudo-Classes</h1> <h2>:has()</h2> <div class="product"> <span class="price">£925.00</span> </div> <div class="product discount"> <span class="price">£925.00</span> <div class="strikethrough">Was £1,220.00</div> </div> <br /> <h2>:not()</h2> <ul> <li>Item 1</li> <li class="highlight">Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <br /> <h2>empty</h2> <ul> <li>Item 1</li> <li></li> <li>Item 3</li> </ul> <br /> <h2>:focus</h2> <input type="text" class="input-field" placeholder="Enter text"> <br><br /> <h2>:checked</h2> <input type="checkbox" id="agree" class="checkbox"> <label for="agree">I agree to the terms</label> <br /><br /> <h2>:disabled</h2> <button class="btn" disabled>Submit</button> <br /><br /> <h2>:before / :after</h2> <button class="arrow-btn">Next</button> <br><br> <h2>:first-child / :last-child</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h2>:nth-child()</h2> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h2>:first-of-type & :last-of-type</h2> <p><u>These pseudo-classes are similar to :first-child/:last-child, but they target the first or last element of a specific type (not just any child).</u></p> <div class="parent"> <span>This is a span.</span> <br> <h3>This is a title</h3> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>Yet another paragraph.</p> <br> <span>This is a span.</span> <br> </div> </div>

/* :has() */ .product{ padding: 30px 20px; font-size: 20px; border: 1px solid #ddd; margin-bottom: 10px; } .product .price { color: black; } .product:has(.strikethrough) .price { color: red; } /* not */ li:not(.highlight) { background-color: #f00; } /* empty */ li:empty { background-color: #ddd; } /* :focus */ .input-field:focus { border-color: #f00; outline: none; } /* :checked */ .checkbox { appearance: none; width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 4px; cursor: pointer; position: relative; } .checkbox:checked { background-color: #4CAF50; border-color: #4CAF50; } /* Add a checkmark when checked */ .checkbox:checked::after { content: '✔'; color: white; font-size: 16px; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* :disabled */ .btn:disabled { cursor: not-allowed; } /* :before / :after */ .arrow-btn:before { content: '→'; margin-right: 5px; } /* :first-child / :last-child */ li:first-child { font-weight: bold; } li:last-child { font-style: italic; } /* :nth-child() */ ol li:nth-child(even) { background-color: #000; } /* :first-of-type & :last-of-type */ .parent h3:first-of-type { background-color: red; font-weight: bold; } .parent p:last-of-type{ background-color: #f00;; }