{"id":3127,"date":"2021-08-08T09:56:20","date_gmt":"2021-08-08T09:56:20","guid":{"rendered":"https:\/\/infyblog.zluck.in\/?p=3127"},"modified":"2024-08-12T06:18:28","modified_gmt":"2024-08-12T06:18:28","slug":"understanding-css-attribute-selectors","status":"publish","type":"post","link":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/","title":{"rendered":"Understanding CSS Attribute Selectors"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3127\" class=\"elementor elementor-3127\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6c3ed60 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6c3ed60\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c60c2ba\" data-id=\"c60c2ba\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\n\t\t<div class=\"elementor-element elementor-element-22e9393 elementor-widget elementor-widget-text-editor\" data-id=\"22e9393\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In HTML and CSS, an attribute selector is used to select any element with a specific attribute or value. This is a great way to style HTML elements by grouping them based on some specific features, and the feature selector will select elements with similar elements.<\/p><p>In CSS LifeStyle Example: We know that styling HTML elements with their tag names, class names, ID names, etc.\u2028This all will apply the changes to all tags or all classes or all ID names within the page. But if I have a situation where I want to apply styles to a tag name but only a few of them we just name their attribute in the indexing bracket. Therefore that it can only apply those changes to matching tag name and attribute name matching elements.<\/p><h2>Here are 7 CSS Attribute Selector Syntax:<\/h2><ul><li>[attribute]<\/li><li>[attribute=value]<\/li><li>[attribute~=value]<\/li><li>[attribute|=value]<\/li><li>[attribute^=value]<\/li><li>[attribute$=value]<\/li><li>[attribute*=value]<\/li><\/ul><p><strong>1) [attribute] Selector<\/strong> only used to select HTML elements with the required attribute.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b71c13d elementor-widget elementor-widget-code-highlight\" data-id=\"b71c13d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ This will color the tag with a title attribute.\r\n\r\na[title] { \r\n\u2028     color: yellow;\r\n}\r\n\r\n<a href=\u201d\u201d title=\u201d\u201d><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7285800 elementor-widget elementor-widget-text-editor\" data-id=\"7285800\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>2) [attribute=value] Selector<\/strong> used to select HTML elements with required attribute and value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4cd740 elementor-widget elementor-widget-code-highlight\" data-id=\"f4cd740\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ This is used to select HTML elements with the required target and _blank.\r\n\r\na[target=\u201d_blank\u201d] { \r\n\u2028   color: yellow;\u2028\r\n}\r\n\r\n<a href=\u201d\u201d target=\u201d_blank\u201d><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f60f699 elementor-widget elementor-widget-text-editor\" data-id=\"f60f699\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>3) [attribute~=\u201dvalue\u201d] Selector<\/strong> used to select HTML elements with required attribute value contains a given word anywhere in the selector.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d757df3 elementor-widget elementor-widget-code-highlight\" data-id=\"d757df3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ This will color the tag with title attribute value as a para word.\r\n\r\n[title~=para] { \r\n   color: yellow;\r\n\u2028}\r\n\r\n<p title=\u201dhello_para\u201d\/> \r\n<p  title=\u201d_blank_para\u201d><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80237d8 elementor-widget elementor-widget-text-editor\" data-id=\"80237d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>4) [attribute|=\u201dvalue\u201d] Selector<\/strong> used to select HTML elements whose attribute value starting with specified value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35a55a9 elementor-widget elementor-widget-code-highlight\" data-id=\"35a55a9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/This will color the tag with class attribute value as starting with the specified value\u2028.\r\n\r\n[class!=mango] { \r\ncolor: blue;\u2028\r\n}\r\n\r\n<p class=\u201dmango_yellow\u201d\/> \r\n<p class=\u201d\u201d title=\u201dmango_red\u201d><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-002796c elementor-widget elementor-widget-text-editor\" data-id=\"002796c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>5) [attribute^=\u201dvalue\u201d] Selector<\/strong> used to select HTML elements whose attribute value begins with the specified value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b41ac8 elementor-widget elementor-widget-code-highlight\" data-id=\"1b41ac8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ This will color the tag with class attribute value as start with the specified string\u2028.\r\n\r\n[class!=\u201dthere\u201d] { \r\ncolor: blue;\r\n\u2028}\r\n\r\n<p class=\u201dthere_yellow\u201d \/>\r\n<p class=\u201d\u201d title=\u201dthere_red\u201d \/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0dddc6b elementor-widget elementor-widget-text-editor\" data-id=\"0dddc6b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>6) [attribute$=\u201dvalue\u201d] Selector<\/strong> used to select HTML elements whose attribute value ends with the specified value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8af6376 elementor-widget elementor-widget-code-highlight\" data-id=\"8af6376\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/This will color the tag with class attribute value as ends with the hello string\u2028.\r\n\r\n[class$=\u201dhello\u201d] { \r\ncolor: blue;\r\n\u2028}\r\n\r\n<p class=\u201dhi_there_hello\u201d \/> \r\n<p class=\u201dI_am_hello\u201d \/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96fbc48 elementor-widget elementor-widget-text-editor\" data-id=\"96fbc48\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><strong>7) *[attribute=\u201dvalue\u201d] Selector**<\/strong> used to select HTML elements whose attribute value contains specified value anywhere in the attribute value.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e2c19d elementor-widget elementor-widget-code-highlight\" data-id=\"4e2c19d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/This will color the tag with class attribute contains specified value anywhere\u2028.\r\n\r\n[class*=\u201dam\u201d] { \r\ncolor: blue;\r\n\u2028}\r\n\r\n<p class=\u201dgaming\u201d\/> \r\n<p class=\u201dgames\u201d\/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>In HTML and CSS, an attribute selector is used to select any element with a specific attribute or&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"two_page_speed":[],"footnotes":""},"categories":[73],"tags":[74,92],"class_list":["post-3127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Understanding CSS Attribute Selectors<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding CSS Attribute Selectors\" \/>\n<meta property=\"og:description\" content=\"In HTML and CSS, an attribute selector is used to select any element with a specific attribute or...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | InfyOm Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infyom\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-08T09:56:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-12T06:18:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png\" \/>\n\t<meta property=\"og:image:width\" content=\"772\" \/>\n\t<meta property=\"og:image:height\" content=\"484\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InfyOm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:site\" content=\"@InfyOm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InfyOm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\"},\"author\":{\"name\":\"InfyOm\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\"},\"headline\":\"Understanding CSS Attribute Selectors\",\"datePublished\":\"2021-08-08T09:56:20+00:00\",\"dateModified\":\"2024-08-12T06:18:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\"},\"wordCount\":266,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png\",\"keywords\":[\"CSS\",\"HTML\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\",\"url\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\",\"name\":\"Understanding CSS Attribute Selectors\",\"isPartOf\":{\"@id\":\"https:\/\/infyom.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png\",\"datePublished\":\"2021-08-08T09:56:20+00:00\",\"dateModified\":\"2024-08-12T06:18:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png\",\"width\":772,\"height\":484,\"caption\":\"Understanding CSS Attribute Selectors\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/infyom.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding CSS Attribute Selectors\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/infyom.com\/blog\/#website\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"name\":\"Blog | InfyOm Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/infyom.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/infyom.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/infyom.com\/blog\/#organization\",\"name\":\"InfyOm Technologies\",\"url\":\"https:\/\/infyom.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"contentUrl\":\"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png\",\"width\":88,\"height\":41,\"caption\":\"InfyOm Technologies\"},\"image\":{\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/infyom\",\"https:\/\/x.com\/InfyOm\",\"https:\/\/www.instagram.com\/infyomtechnologies\/\",\"https:\/\/in.linkedin.com\/company\/infyom-technologies\",\"https:\/\/github.com\/infyomlabs\",\"https:\/\/x.com\/infyom\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754\",\"name\":\"InfyOm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g\",\"caption\":\"InfyOm\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding CSS Attribute Selectors","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/","og_locale":"en_US","og_type":"article","og_title":"Understanding CSS Attribute Selectors","og_description":"In HTML and CSS, an attribute selector is used to select any element with a specific attribute or...","og_url":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/","og_site_name":"Blog | InfyOm Technologies","article_publisher":"https:\/\/www.facebook.com\/infyom","article_published_time":"2021-08-08T09:56:20+00:00","article_modified_time":"2024-08-12T06:18:28+00:00","og_image":[{"width":772,"height":484,"url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png","type":"image\/png"}],"author":"InfyOm","twitter_card":"summary_large_image","twitter_creator":"@InfyOm","twitter_site":"@InfyOm","twitter_misc":{"Written by":"InfyOm","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#article","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/"},"author":{"name":"InfyOm","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754"},"headline":"Understanding CSS Attribute Selectors","datePublished":"2021-08-08T09:56:20+00:00","dateModified":"2024-08-12T06:18:28+00:00","mainEntityOfPage":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/"},"wordCount":266,"commentCount":0,"publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"image":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png","keywords":["CSS","HTML"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/","url":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/","name":"Understanding CSS Attribute Selectors","isPartOf":{"@id":"https:\/\/infyom.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage"},"image":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage"},"thumbnailUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png","datePublished":"2021-08-08T09:56:20+00:00","dateModified":"2024-08-12T06:18:28+00:00","breadcrumb":{"@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#primaryimage","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/07\/understanding-css-attribute-selectors.png","width":772,"height":484,"caption":"Understanding CSS Attribute Selectors"},{"@type":"BreadcrumbList","@id":"https:\/\/infyom.com\/blog\/understanding-css-attribute-selectors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/infyom.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding CSS Attribute Selectors"}]},{"@type":"WebSite","@id":"https:\/\/infyom.com\/blog\/#website","url":"https:\/\/infyom.com\/blog\/","name":"Blog | InfyOm Technologies","description":"","publisher":{"@id":"https:\/\/infyom.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/infyom.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/infyom.com\/blog\/#organization","name":"InfyOm Technologies","url":"https:\/\/infyom.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","contentUrl":"https:\/\/infyom.com\/blog\/wp-content\/uploads\/2024\/06\/InfyOm-Logo.png","width":88,"height":41,"caption":"InfyOm Technologies"},"image":{"@id":"https:\/\/infyom.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infyom","https:\/\/x.com\/InfyOm","https:\/\/www.instagram.com\/infyomtechnologies\/","https:\/\/in.linkedin.com\/company\/infyom-technologies","https:\/\/github.com\/infyomlabs","https:\/\/x.com\/infyom"]},{"@type":"Person","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/659bfc844c333d041221e83c5f5ec754","name":"InfyOm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/infyom.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ad162864d8d33c04ea9e6d0333cc483?s=96&d=mm&r=g","caption":"InfyOm"}}]}},"_links":{"self":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/comments?post=3127"}],"version-history":[{"count":15,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3127\/revisions"}],"predecessor-version":[{"id":6568,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/posts\/3127\/revisions\/6568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media\/3129"}],"wp:attachment":[{"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/media?parent=3127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/categories?post=3127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infyom.com\/blog\/wp-json\/wp\/v2\/tags?post=3127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}