{"id":17639,"date":"2020-05-31T17:52:08","date_gmt":"2020-06-01T00:52:08","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=17639"},"modified":"2023-12-01T03:05:21","modified_gmt":"2023-12-01T11:05:21","slug":"css-attribute-selector","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/","title":{"rendered":"CSS Attribute Selector"},"content":{"rendered":"\n<p>CSS selectors allow web developers to apply styles to a particular element or set of elements on a web page.<br><\/p>\n\n\n\n<p>When working with selectors, you may decide you want to target only elements with a particular attribute. That\u2019s where the CSS attribute selector comes in. The attribute selector helps you apply certain styles only to elements with a specific attribute.<br><\/p>\n\n\n\n<p>This tutorial will discuss how to use the CSS attribute selector when styling elements. By the end of reading this tutorial, you\u2019ll be an expert at using the attribute selector to style elements.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Attributes<\/h2>\n\n\n\n<p>In HTML, attributes are used to define additional characteristics or properties of an element. For instance, the height attribute sets the height of an image, and the title attribute sets the title of a web element.<br><\/p>\n\n\n\n<p>You declare attributes using the name\/value pair structure. This means that, in a HTML file, an attribute will appear like this:<code> name=\u201cvalue\u201d<\/code>. To learn more about attributes in HTML, read our guide to <a href=\"https:\/\/careerkarma.com\/blog\/html-attributes\/\">HTML attributes<\/a>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Attribute Selector<\/h2>\n\n\n\n<p>When you\u2019re designing a site, you may want to apply a style to elements based on whether those elements have a particular attribute value. You use the CSS attribute selector to do so.<br><\/p>\n\n\n\n<p>The two steps you will take when using the attribute selector are:<br><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enclose an attribute\u2019s name within square brackets.&nbsp;<\/li>\n\n\n\n<li>Specify the styles you want to apply to the attributes with that name.<\/li>\n<\/ol>\n\n\n\n<p>Let\u2019s explore a few examples of the CSS attribute selector in action.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [Attribute]<\/h2>\n\n\n\n<p>The most basic form of the attribute selector is: <code>[attribute]<\/code>. Put simply, you enclose the name of an attribute in square brackets.&nbsp;<br><\/p>\n\n\n\n<p>Suppose we want to set the font size of every element with a title attribute to 16px. We can do so using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>[title] {\n\tfont-size: 16px;\n}\n<\/pre><\/div>\n\n\n\n<p>The code in our CSS rule will only apply to elements with a title attribute. The font size of any element with a title attribute specified\u2014no matter what value that attribute stores\u2014will change to 16px per the rule above.<br><\/p>\n\n\n\n<p>You can make your attribute selector more precise by specifying one or both of the following:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the particular element type to which a rule should apply<\/li>\n\n\n\n<li>its attribute ID value (such as \u201ctitle\u201d for text, \u201chref\u201d for a link, or \u201cclass\u201d for any element).<\/li>\n<\/ul>\n\n\n\n<p>For example, suppose you want to set the size of all paragraph header text to 16 px. You can do so using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>[title] {\n\tfont-size: 16px;\n}\n<\/pre><\/div>\n\n\n\n<p>The letter <code>p<\/code> at the start of the attribute selector tells the browser to apply the font style only to <code>&lt;p&gt;<\/code> tags. The <code>[title]<\/code> part of the selector instructs the browser to apply the font style only to &lt;p&gt; tags with a <code>title<\/code> attribute specified.<br><\/p>\n\n\n\n<p>Therefore, after reading this code, the browser will convert the font size of all paragraph (p) headings to 16 px. This code will not affect any other text on the page.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The <code>[attribute=\u201cvalue\u201d]<\/code> attribute selector enables coders to apply styles only to elements whose attribute values are equal to the value specified in the selector.<br><\/p>\n\n\n\n<p>Suppose we want to set the background color of all links to the Career Karma homepage to orange. This style should set the background color of the <code>a<\/code> element to orange. We can perform this action using the following CSS code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>a[href=\"careerkarma.com\"] {\n\tbackground-color: orange;\n}\n<\/pre><\/div>\n\n\n\n<p>This rule selects all of your web page\u2019s &lt;a&gt; elements whose href attribute is equal to <code>careerkarma.com<\/code>. Then, it sets the background color of all those elements to orange.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute~=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The<code> [attribute~=\u201cvalue\u201d]<\/code> selector allows you to select elements with attribute values that contain a specific word.<br><\/p>\n\n\n\n<p>For instance, suppose you want to apply a style to all <code>p<\/code> elements with titles that match the word <code>blue<\/code>. For this style, the text color of these elements should be changed to blue.<br><\/p>\n\n\n\n<p>We can use the following rule to accomplish this task:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>p[title~=\"blue\"] {\n\tcolor: blue;\n}\n<\/pre><\/div>\n\n\n\n<p>This rule will find all &lt;p&gt; tags associated with titles containing the word \u201cblue\u201d and will set the text color of the text within those &lt;p&gt; tags to blue. So, if a &lt;p&gt; tag has the title <code>blue color<\/code> or <code>color blue<\/code>, this style will apply. However, this rule will <strong><em>not<\/em><\/strong> apply to a &lt;p&gt; tag with the title <code>blueColor<\/code> because the word <code>blue<\/code> is not independently present within the attribute.<br><\/p>\n\n\n\n<p>This is different to the <code>*= selector<\/code>, which can not only find a specific word in an attribute, but can also find a specific value in an attribute.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute|=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The <code>[attribute|=\u201cvalue\u201d]<\/code> selector allows you to select elements with attributes that start with a specified value (for example, \u201ctop\u201d). This includes elements with attributes that start with the specified value and contain a hyphen followed by additional text (for example, \u201ctop-style\u201d and other \u201ctop-\u201d values). Note that the code calls for a vertical bar (|) after the word \u201cclass.\u201d<br><\/p>\n\n\n\n<p>For instance, suppose you want to assign a 10px top padding to every <code>&lt;div&gt;<\/code> element with a class attribute that starts with <code>top<\/code>, including those that are followed by other hyphen-separated values. You can do so using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div[class|=\"top\"] {\n\tpadding-top: 10px;\n}\n<\/pre><\/div>\n\n\n\n<p>This rule will apply a 10px padding to the top of every &lt;div&gt; element whose class name starts with <code>top<\/code>, including elements with class names that start with <code>top-<\/code>.&nbsp;<br><\/p>\n\n\n\n<p>It\u2019s important to note the value you specify must be either a whole word alone or a word followed by a hyphen. In other words, our above style would apply to &lt;div&gt; elements with the class names <code>top style<\/code> and <code>top-style<\/code>, but not to a &lt;div&gt; element with the class name <code>topstyle<\/code>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute^=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The <code>[attribute^=\u201cvalue\u201d]<\/code> selector is used to select elements whose attribute value starts with a specific value. The value you specify does not have to be a whole word, unlike the <code>[attribute|=\u201cvalue\u201d]<\/code> selector we discussed earlier.<br><\/p>\n\n\n\n<p>Suppose we want to apply a 10px bottom padding to every &lt;div&gt; element which has a class attribute starting with <code>paddingBottom<\/code>. We can do so using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div[class^=\"paddingBottom\"] {\n\tpadding-bottom: 10px;\n}\n<\/pre><\/div>\n\n\n\n<p>The user\u2019s web browser will apply the padding-bottom style we defined to all &lt;div&gt; tags whose class names start with \u201cpaddingBottom\u201d. So, if we have a class called \u201cpaddingBottomStyle\u201d, this style will apply. This style will also apply to classes called \u201cpaddingBottom\u201d and \u201cpaddingBottom-element\u201d, for instance. But, it would not apply to a class called \u201cnew-paddingBottom\u201d, which does not begin with \u201cpaddingBottom\u201d.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute$=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The <code>$= operator <\/code>is used to select all elements whose attribute values end with a particular value. For instance, suppose you want to change the text color to gray of all hyperlinked text whose href attribute values end in <code>.app<\/code>. You can do so using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>a[href$=\".app\"] {\n\tcolor: gray;\n}\n<\/pre><\/div>\n\n\n\n<p>This selector will apply to all &lt;a&gt; elements on your web page whose href values end in <code>.app<\/code>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS [attribute*=\u201cvalue\u201d]<\/h2>\n\n\n\n<p>The<code> *= operator <\/code>allows you to select all elements whose attribute values contain a particular value. Unlike the <code>~= operator<\/code>, this attribute selector can find a particular value in a class, not just a single word.<br><\/p>\n\n\n\n<p>For instance, suppose you want to apply a 50px padding around all &lt;div&gt; tags whose class attributes contain <code>allPadding<\/code>. You can do so using this rule:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div[class*=\"allPadding\"] {\n\tpadding: 50px;\n}\n<\/pre><\/div>\n\n\n\n<p>This rule will set a 50px padding around all HTML elements with class attributes that contain the term <code>allPadding<\/code>. So, elements with the class names <code>new allPadding<\/code>, <code>surround allPadding red<\/code>, <code>allPaddingblue<\/code> and <code>allPadding-true<\/code> will all be subject to this style.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS attribute selector allows developers to select elements based on their attribute values and apply specific styles to those elements.<br><\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, the basics of attribute selectors and how to use all types of the CSS attribute selector. Now you\u2019re ready to start using the CSS attribute selector like a pro.<\/p>\n\n\n\n<p><br><strong><em>CSS is one of the three main skills used in web development. Download the <\/em><\/strong><a href=\"https:\/\/careerkarma.com\/\"><strong><em>free Career Karma app<\/em><\/strong><\/a><strong><em> today to talk with an expert career coach who can help advise you on skills you need to break into a career as a web developer.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"CSS selectors allow web developers to apply styles to a particular element or set of elements on a web page. When working with selectors, you may decide you want to target only elements with a particular attribute. That\u2019s where the CSS attribute selector comes in. The attribute selector helps you apply certain styles only to&hellip;","protected":false},"author":240,"featured_media":17640,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-17639","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Attribute Selector. Full Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Attribute Selector\" \/>\n<meta property=\"og:description\" content=\"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-01T00:52:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:05:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"664\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Attribute Selector\",\"datePublished\":\"2020-06-01T00:52:08+00:00\",\"dateModified\":\"2023-12-01T11:05:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/\"},\"wordCount\":1312,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-1245714_1920.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/\",\"name\":\"CSS Attribute Selector. Full Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-1245714_1920.jpg\",\"datePublished\":\"2020-06-01T00:52:08+00:00\",\"dateModified\":\"2023-12-01T11:05:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-1245714_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-1245714_1920.jpg\",\"width\":1000,\"height\":664},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-attribute-selector\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Attribute Selector\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Attribute Selector. Full Guide | Career Karma","description":"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.","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:\/\/careerkarma.com\/blog\/css-attribute-selector\/","og_locale":"en_US","og_type":"article","og_title":"CSS Attribute Selector","og_description":"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.","og_url":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-01T00:52:08+00:00","article_modified_time":"2023-12-01T11:05:21+00:00","og_image":[{"width":1000,"height":664,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Attribute Selector","datePublished":"2020-06-01T00:52:08+00:00","dateModified":"2023-12-01T11:05:21+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/"},"wordCount":1312,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/","url":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/","name":"CSS Attribute Selector. Full Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg","datePublished":"2020-06-01T00:52:08+00:00","dateModified":"2023-12-01T11:05:21+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"On CSS, you can apply styles to elements with a particular attribute using CSS\u2019s attribute selector. On Career Karma, learn how to use the attribute selector.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-attribute-selector\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-1245714_1920.jpg","width":1000,"height":664},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-attribute-selector\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Attribute Selector"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=17639"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17639\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/17640"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=17639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=17639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=17639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}