Test your CSS selector skills

samples.json

[
    {
        "pattern": "h1~div:first-of-type .button[data-type=\"submit\"]:not(.disabled)",
        "description": "Selects an element with class 'button' and data attribute 'data-type' set to 'submit', that is also not 'disabled', which is a descendant of the first element of type 'div' that comes after an 'h1' element.",
        "elementName": "",
        "classes": [
            "button"
        ],
        "example": "\t<h1>Title</h1>\r\n\t<div>\r\n\t\t<button class=\"button\" data-type=\"submit\">Submit</button>\r\n\t</div>\r\n\t<div>\r\n\t\t<button class=\"button\" data-type=\"cancel\">Cancel</button>\r\n\t</div>\r\n\t<div>\r\n\t\t<button class=\"button\" data-type=\"submit\" disabled>Disabled</button>\r\n\t</div>",
        "note": ""
    },
    {
        "pattern": ".container > ul li:first-child",
        "description": "Selects the first li element that is a direct child of a ul element inside an element with class 'container'",
        "elementName": "li",
        "classes": [],
        "example": "<div class=\"container\">\r\n  <ul>\r\n    <li>First Item</li>\r\n    <li>Second Item</li>\r\n  </ul>\r\n</div>",
        "note": ""
    },
    {
        "pattern": "div:nth-of-type(odd):not(.special)",
        "description": "Selects odd-indexed div elements that do not have class 'special'",
        "elementName": "div",
        "classes": [
            "special"
        ],
        "example": "<div>First</div>\r\n<div class=\"special\">Second</div>\r\n<div>Third</div>\r\n<div class=\"special\">Fourth</div>",
        "note": ""
    },
    {
        "pattern": ".navbar > .menu-item:hover",
        "description": "Selects the menu item element that is a direct child of the navbar element, and is being hovered over.",
        "elementName": "menu-item",
        "classes": [
            "navbar"
        ],
        "example": "<div class=\"navbar\">\n\t<div class=\"menu-item\"></div>\n</div>",
        "note": ""
    },
    {
        "pattern": "h2+p>span:nth-child(3n)",
        "description": "Select the third, sixth, ninth, etc. span elements that are direct children of a p element immediately following an h2 element.",
        "elementName": "span",
        "classes": [],
        "example": "<h2>Title</h2>\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\r\n<p><span>Span 1</span></p>\r\n<p><span>Span 2</span></p>\r\n<p><span>Span 3</span></p>\r\n<p><span>Span 4</span></p>\r\n<p><span>Span 5</span></p>\r\n<p><span>Span 6</span></p>",
        "note": "This selector can be optimized by giving the p element a class or ID, to improve performance."
    },
    {
        "pattern": "div > p:first-child",
        "description": "Selects the first child p element of each div element",
        "elementName": "p",
        "classes": [],
        "example": "<div>\n\t<p>First paragraph</p>\n\t<p>Second paragraph</p>   \n\t<p>Third paragraph</p>   \n</div>\n<div>\n\t<p>Another paragraph</p>\n\t<p>Yet another paragraph</p>\n</div>",
        "note": "This selector will select the first child p element of each div element. It can be used to apply styles to the first paragraph within each div."
    },
    {
        "pattern": "ul li:not(.special)",
        "description": "Selects all li elements within ul elements except those with the class 'special'",
        "elementName": "li",
        "classes": [
            "special"
        ],
        "example": "<ul>\n\t<li>Item 1</li>\n\t<li class=\"special\">Special Item</li>   \n\t<li>Item 2</li>   \n\t<li>Item 3</li>\n</ul>",
        "note": "It can be used to exclude certain list items from a specific style."
    },
    {
        "pattern": "input[type='text'][required]",
        "description": "Selects all input elements of type 'text' that are required",
        "elementName": "input",
        "classes": [],
        "example": "<input type=\"text\" required />\n<input type=\"text\" />\n<input type=\"password\" required />",
        "note": "This selector will select all input elements of type 'text' that have the 'required' attribute. It can be used to apply styles specifically to required text input fields."
    },
    {
        "pattern": "button#submit",
        "description": "Matches a button element with the id of 'submit'.",
        "elementName": "button",
        "classes": [],
        "example": "<button id='submit'>Submit</button>",
        "note": "The # sign is used to select an element with a specific id."
    },
    {
        "pattern": "p>span:nth-child(3n)",
        "description": "Selects every third <span> element that is a direct child of a <p> element.",
        "elementName": "span",
        "classes": [],
        "example": "<p>\n\t<span>Item 1</span><br>\n\t<span>Item 2</span><br>\n\t<span>Item 3</span><br>\n\t<span>Item 4</span><br>\n\t<span>Item 5</span><br>\n</p>",
        "note": "The :nth-child() selector can be used with any element, not just <p> and <span>. The '3n' part means every third element."
    },
    {
        "pattern": "span:nth-of-type(2n)",
        "description": "Select every even numbered span element",
        "elementName": "span",
        "classes": [],
        "example": "\t<div>\r\n\t\t<span>1</span>\r\n\t\t<span>2</span>  <!-- Matches -->\r\n\t\t<span>3</span>\r\n\t\t<span>4</span>  <!-- Matches -->\r\n\t\t<span>5</span>\r\n\t</div>",
        "note": "This selector selects every even numbered span element. To optimize the selector, add a parent container with a specific class or ID, so the selector is more targeted and improves performance."
    }
]