polyfill<\/a>, or use these selectors in non-critical ways \u00e1 la progressive enhancement, which is recommended.<\/p>\n","protected":false},"excerpt":{"rendered":"The :valid selector allows you to select <input> elements that contain valid content, as determined by its type attribute. :valid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This selector has one particular use: providing […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14281,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14206,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/invalid\/","url_meta":{"origin":14285,"position":0},"title":":invalid","date":"September 6, 2011","format":false,"excerpt":"The :invalid selector allows you to select elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14204,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/id\/","url_meta":{"origin":14285,"position":1},"title":"ID","date":"September 6, 2011","format":false,"excerpt":"The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes are denoted in CSS with a \u201cperiod\u201d (.) before the class name, ID attributes are prefixed with an \u201coctothorpe\u201d (#), more commonly known as a \u201chash\u201d or \u201cpound sign\u201d. #header\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14267,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/required\/","url_meta":{"origin":14285,"position":2},"title":":required","date":"September 6, 2011","format":false,"excerpt":"The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14172,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/","url_meta":{"origin":14285,"position":3},"title":":disabled","date":"September 6, 2011","format":false,"excerpt":"The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user's interaction\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196824,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-to-qualify-a-selector\/","url_meta":{"origin":14285,"position":4},"title":"Mixin to Qualify a Selector","date":"February 26, 2015","format":false,"excerpt":"There is no easy way of qualifying a selector from within its associated ruleset. By qualifying I mean prepending an element name (e.g. a) to a class (e.g. .btn) so that a ruleset gets specific to a combination of an element selector and a class selector (e.g. a.btn) for instance.\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":14285,"position":5},"title":"::file-selector-button","date":"August 30, 2022","format":false,"excerpt":"The ::file-selector-button in CSS is a pseudo-element that selects in HTML. input::file-selector-button { background-color: #f8a100; } You've undoubtedly come across file upload inputs \u2014 they're very common, especially for including file attachments in a form, like a PDF or image. CodePen Embed Fallback Syntax selector::file-selector-button { } You\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14285"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14285"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14285\/revisions"}],"predecessor-version":[{"id":263164,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14285\/revisions\/263164"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14281"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14285"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}