{"id":109,"date":"2024-10-28T04:34:22","date_gmt":"2024-10-28T04:34:22","guid":{"rendered":"https:\/\/techkubo.com\/css\/?p=109"},"modified":"2025-05-12T12:56:57","modified_gmt":"2025-05-12T12:56:57","slug":"css-pseudo-classes","status":"publish","type":"post","link":"https:\/\/techkubo.com\/css\/css-pseudo-classes\/","title":{"rendered":"CSS Pseudo-classes"},"content":{"rendered":"\n

Pseudo-classes apply styles to elements based on their state or position in the document tree. <\/p>\n\n\n\n

<\/p>\n\n\n\n

:Hover<\/strong><\/h2>\n\n\n\n

The :hover<\/code> pseudo-class applies styles when the user hovers over an element.<\/p>\n\n\n\n

a:hover {\n    color: red;\n}<\/pre><\/div>\n\n\n\n
:Focus<\/strong><\/h2>\n\n\n\n
The :focus<\/code> pseudo-class applies styles when an element receives focus, such as when a user clicks on an input field.<\/p>\n\n\n\n
input:focus {\n    border-color: blue;\n}<\/pre><\/div>\n\n\n\n
:Nth-child(n)<\/strong><\/h2>\n\n\n\n
The :nth-child(n)<\/code> pseudo-class applies styles to the nth child of a parent element<\/p>\n\n\n\n
li:nth-child(odd) {\n    background-color: lightgrey;\n}<\/pre><\/div>\n\n\n\n
:First-child<\/strong><\/h2>\n\n\n\n
The :first-child<\/code> pseudo-class applies styles to the first child of a parent element.<\/p>\n\n\n\n
p:first-child {\n    font-weight: bold;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
CSS Pseudo-classes Example Code<\/strong><\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>CSS Pseudo-classes Example<\/title>\n    <style>\n        a:hover {\n            color: red;\n        }\n        input:focus {\n            border-color: blue;\n        }\n        li:nth-child(odd) {\n            background-color: lightgrey;\n        }\n        p:first-child {\n            font-weight: bold;\n        }\n    <\/style>\n<\/head>\n<body>\n    <a href="#">Hover over this link<\/a>\n    <br><br>\n    <input type="text" placeholder="Focus on me">\n    <br><br>\n    <ul>\n        <li>Item 1<\/li>\n        <li>Item 2<\/li>\n        <li>Item 3<\/li>\n        <li>Item 4<\/li>\n    <\/ul>\n    <p>This is the first paragraph.<\/p>\n    <p>This is another paragraph.<\/p>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
CSS Labs<\/strong><\/h2>\n\n\n\n