Skip to main content

Select elements by attributes with patterns

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Cards with CSS3 Selectors</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .card-container {
            display: flex;
            gap: 20px;
        }

        .card {
            width: 200px;
            height: 300px;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Selecting cards with data-theme attribute */
        .card[data-theme="nature"] {
            background-color: #4CAF50;
        }

        .card[data-theme="tech"] {
            background-color: #2196F3;
        }

        .card[data-theme="art"] {
            background-color: #FF9800;
        }

        /* Selecting cards with both a class and an attribute */
        .card.featured[data-theme] {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        /* Selecting elements with a specific class within cards */
        .card .title {
            font-size: 1.5em;
            color: white;
            margin-bottom: 10px;
        }

        /* Using :not pseudo-class */
        .card:not(.featured) .title {
            font-weight: normal;
        }

        /* Selecting elements that start with a specific string */
        div[id^="icon-"] {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        [id=icon-tree] {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2L3 9h3v11h12V9h3L12 2zm0 15c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>');
        }

        #icon-bulb {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>');
        }

        #icon-palette {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>');
        }

        /* Using attribute selectors and :hover */
        .card[data-theme]:hover {
            cursor: pointer;
            transform: translateY(-5px);
        }

        /* Using ::before pseudo-element and attr() function */
        .card::before {
            content: attr(data-theme);
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8em;
            color: white;
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card featured" data-theme="nature">
            <h2 class="title">Nature</h2>
            <p>Explore the beauty of the natural world.</p>
            <div id="icon-tree"></div>
        </div>
        <div class="card" data-theme="tech">
            <h2 class="title">Technology</h2>
            <p>Discover the latest in tech innovations.</p>
            <div id="icon-bulb"></div>
        </div>
        <div class="card" data-theme="art">
            <h2 class="title">Art</h2>
            <p>Immerse yourself in creativity and expression.</p>
            <div id="icon-palette"></div>
        </div>
    </div>
</body>
</html>

You can view it live here

No comments to display

Back to top