{"id":13708,"date":"2011-08-20T11:16:02","date_gmt":"2011-08-20T18:16:02","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13708"},"modified":"2011-08-20T11:16:02","modified_gmt":"2011-08-20T18:16:02","slug":"selectors","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/","title":{"rendered":"Selectors"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":13706,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-group.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":148076,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/04-jquery-selectors-css3-selectors\/","url_meta":{"origin":13708,"position":0},"title":"#04: jQuery Selectors are CSS3 Selectors","date":"August 25, 2013","format":false,"excerpt":"In CSS, you can select all elements on the page with this: h1 { \/* style all elements *\/ } In jQuery, you can use that exact same selector. $(\"h1\") \/\/ set of all elements In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":13708,"position":1},"title":":not","date":"September 6, 2011","format":false,"excerpt":"The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors. The ability to use a\u2026","rel":"","context":"In \":not\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/not-slide.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":249595,"url":"https:\/\/css-tricks.com\/snippets\/sass\/use-sass-variable-selector\/","url_meta":{"origin":13708,"position":2},"title":"Use a Sass Variable for a Selector","date":"January 2, 2017","format":false,"excerpt":"Say you need to use a certain selector in multiple places in your code. It's not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier. One way to do it is to\u2026","rel":"","context":"In \"Sass\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195116,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/blank\/","url_meta":{"origin":13708,"position":3},"title":":blank","date":"February 4, 2015","format":false,"excerpt":"The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. p:blank { display: none; } p:blank will select these paragraphs, just like\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14164,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/class\/","url_meta":{"origin":13708,"position":4},"title":"Class","date":"September 6, 2011","format":false,"excerpt":"A class selector in CSS starts with a dot (.), like this: .class { } A class selector selects all elements with a matching class attribute. For example, this element: <button class=\"big-button\">Push Me<\/button> is selected and styled like this: .big-button { font-size: 60px; } You can give a class any\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14206,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/invalid\/","url_meta":{"origin":13708,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13708"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13708"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13708\/revisions"}],"predecessor-version":[{"id":13709,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13708\/revisions\/13709"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13706"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13708"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}