{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiffha6mjzlmapj5f53pbyeinvsl54nx7xsjkexqc6f5mvsycfwawq",
    "uri": "at://did:plc:c4uo5im4kb23i76qndr43xi2/app.bsky.feed.post/3mkobajrift42"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigffdl2ubifdncgkev465jk42y2ciyzzidhnqsa6y6yqrb73widnq"
    },
    "mimeType": "image/png; charset=UTF-8",
    "size": 767657
  },
  "path": "/links/quantity-queries",
  "publishedAt": "2026-04-29T04:00:00.000Z",
  "site": "https://jonathanstephens.us",
  "tags": [
    "Tool",
    "Css",
    "Quanitty Queries",
    "Has()",
    "Calculator",
    "Generator",
    "Useful",
    "Css Tool",
    "Front End Development",
    "Snippet",
    "Css Snippet"
  ],
  "textContent": "Really useful calculator to help create the quantity queries for selectors.\n\nPut in the element being queried, set quantity (exactly, at least, at most, between), the children elements, and wahlah. The example:\n\n\n    .container:has(> :nth-last-child(3):nth-child(-n + 8)) {\n      /*                */\n      /* your CSS here  */\n      /*                */\n    }\n\nAlso, two useful quantity selectors too:\n\n\n    /* select .container if it has an even number of child elements */\n    .container:has(> :last-child:nth-child(even)) {\n      /* your CSS here */\n    }\n    /* select .container if it has an odd number of child elements */\n    .container:has(> :last-child:nth-child(odd)) {\n      /* your CSS here */\n    }",
  "title": "Quantity queries using has() selector"
}