test page<\/a>. If the line\/selector style is in red, it works.<\/p>\n","protected":false},"excerpt":{"rendered":"CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. Check out this bit of HTML: This single element has three attributes: ID, class, and rel. To select the element in CSS, you could use an ID selector (#title) or a clasmagicalector […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,20],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":176856,"url":"https:\/\/css-tricks.com\/how-css-selectors-work\/","url_meta":{"origin":5591,"position":0},"title":"Beginner Concepts: How CSS Selectors Work","date":"August 9, 2014","format":false,"excerpt":"Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting. In\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302917,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-data-attributes\/","url_meta":{"origin":5591,"position":1},"title":"A Complete Guide to Data Attributes","date":"February 17, 2020","format":false,"excerpt":"Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/data-attribute-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377635,"url":"https:\/\/css-tricks.com\/the-power-of-has-in-css\/","url_meta":{"origin":5591,"position":2},"title":"The Power of :has() in CSS","date":"March 29, 2024","format":false,"excerpt":"Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but has gained popularity in the front end community by delivering control over various elements in your UI. Let\u2019s take a look\u2026","rel":"","context":"In "Article"","img":{"alt_text":":has CSS selector","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/has-selector.png?fit=1160%2C856&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336424,"url":"https:\/\/css-tricks.com\/the-css-has-selector\/","url_meta":{"origin":5591,"position":3},"title":"The CSS :has Selector (and 4+ Examples)","date":"March 17, 2021","format":false,"excerpt":"The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/has-pseudo-example.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330827,"url":"https:\/\/css-tricks.com\/how-to-use-the-locomotive-scroll-for-all-kinds-of-scrolling-effects\/","url_meta":{"origin":5591,"position":4},"title":"How to Use the Locomotive Scroll for all Kinds of Scrolling Effects","date":"December 16, 2020","format":false,"excerpt":"I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering\/controlling animations at scroll points. You might also call it a \u201csmooth scrolling\u201d library, but it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353225,"url":"https:\/\/css-tricks.com\/ct-css-performance-hints-via-injected-stylesheet-alone\/","url_meta":{"origin":5591,"position":5},"title":"ct.css \u2014 Performance Hints via Injected Stylesheet Alone","date":"October 5, 2021","format":false,"excerpt":"This is some bonafide CSS trickery from Harry that gives you some generic performance advice based on what it sees in your
element. First, it's possible to make a