{"id":17608,"date":"2020-12-08T01:12:21","date_gmt":"2020-12-08T09:12:21","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=17608"},"modified":"2023-12-01T04:05:43","modified_gmt":"2023-12-01T12:05:43","slug":"css-selectors","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-selectors\/","title":{"rendered":"CSS Selectors: A How-To Guide"},"content":{"rendered":"\n<p><em>CSS selectors select the elements to which you can apply styles. The most basic selector is the element selector, which selects an element by its name. Other selectors include the id, class, universal, and descendant selectors.<\/em><\/p>\n\n\n\n<p>Selectors are one of the two parts of any CSS statement. Selectors are used to target the elements on an HTML page for a certain style.<\/p>\n\n\n\n<p>There are a wide range of CSS selectors that can be used to precisely target the elements on a web page, and allow you a high degree of customization when you are designing one.<\/p>\n\n\n\n<p>This guide will explore the basics of selectors in CSS how you can leverage the most commonly-used selectors in your code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Selectors<\/h2>\n\n\n\n<p>CSS selectors identify the HTML elements to which you want to apply a CSS style. Selectors can choose elements based on their name, ID, class, and other attributes. Selectors appear before a pair of brackets in a CSS rule.<\/p>\n\n\n\n<p>In CSS, rules are used to define the styles that should apply to an element or a range of elements. Rules have two components: selectors and declarations.<\/p>\n\n\n\n<p>Here is an example of a rule in CSS:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1 {\n\tcolor: pink;\n}<\/pre><\/div>\n\n\n\n<p>This CSS rule sets the color of all h1 elements on a web page to pink. The two components of our rule are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>h1<\/strong>, which is the element to which our style is applied. This is called a selector.<\/li><li><strong>color: pink<\/strong>, which is the style applied to the elements in our selector. This is called a declaration. In this example, we change the color of all h1 elements to pink.<\/li><\/ul>\n\n\n\n<p>CSS selectors are a fundamental part of designing web styles. Selectors allow you to tell the browser which elements should use a particular style. For instance, you may have a selector that instructs the browser to style all <em>&lt;h1&gt;<\/em> elements, or all <em>&lt;p&gt;<\/em> elements, on a web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Selector Types<\/h2>\n\n\n\n<p>CSS offers a wide range of selectors. Let us explore an example of the main selectors you are likely to encounter as you design CSS rules.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Element-Based Selector<\/h3>\n\n\n\n<p>The element-based selector allows you to apply a style to all instances of an element in a document to which a rule corresponds. For instance, you can use the element selector to apply a style to all <em>&lt;p&gt;<\/em> tags on a page.<\/p>\n\n\n\n<p>Suppose we wanted to change the color of all the paragraph-based text on a web page to gray. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>p {\n\tcolor: gray;\n}<\/pre><\/div>\n\n\n\n<p>The declarations inside our \u201cp\u201d selector will be applied to every paragraph (<a href=\"https:\/\/careerkarma.com\/blog\/basic-html-tags\/\">HTML <em>&lt;p&gt;<\/em><\/a> tag) on our web page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS id Selector<\/h3>\n\n\n\n<p>The CSS id selector selects a HTML element on a page based on its ID. HTML IDs are unique so the id selector is used to apply styles to a single element on a web page. The syntax for the ID selector is a hash sign followed by the element ID.<\/p>\n\n\n\n<p>Suppose we want to set the value of the <a href=\"https:\/\/careerkarma.com\/blog\/css-height-and-width\/\">CSS height<\/a> attribute of an element called \u201cbox9\u201d on our page to 150px. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>#box9 {\n\theight: 150px;\n}<\/pre><\/div>\n\n\n\n<p>This rule will set the height of the element with the id \u201cbox9\u201d to 150px.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Class Selectors<\/h3>\n\n\n\n<p>CSS class selectors find the elements who have a particular class attribute. The syntax of the class selector is a period (.) and then the name of the class you want to select.<\/p>\n\n\n\n<p>So, if you wanted to target the class \u201cboxMiddle\u201d, you would use the selector \u201c.boxMiddle\u201d.<\/p>\n\n\n\n<p>Let us say we are designing a box on our web page. The box should have a pink background color. Our box has been assigned the class \u201cpinkBox\u201d, to which we can apply our styles. Here is the code we would use to set the color of elements with the pinkBox class to pink:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.pinkBox {\n\tcolor: pink;\n}<\/pre><\/div>\n\n\n\n<p>Every element on a web page with the class \u201cpinkBox\u201d will be set to pink.<\/p>\n\n\n\n<p>In addition, you can also specify that only specific elements with a particular class should be affected by a style. By using only a class selector, every element with a particular class will be affected by the style you define.<\/p>\n\n\n\n<p>If we use a class selector preceded by an element type, we can apply a style only to specific elements with a certain class. Suppose we want the background color of every <a href=\"https:\/\/careerkarma.com\/blog\/html-div\/\">HTML <em>&lt;div&gt;<\/em><\/a> tag with the class \u201cpinkBox\u201d to be set to pink. The style for this would be as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div.pinkBox {\n\tcolor: pink;\n}<\/pre><\/div>\n\n\n\n<p>This style will only be applied to every <em>&lt;div&gt;<\/em> tag with the class \u201cpinkBox\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Universal Selector<\/h3>\n\n\n\n<p>The CSS universal selector selects all elements on a web page. The selector is denotes using an asterisk (*), followed by no element names. It is often used to set margins or default fonts for a web page.<\/p>\n\n\n\n<p>Suppose we wanted all elements on a web page to be aligned to the center of the page. We could use the following code to apply this style to our web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>* {\n\ttext-align: center;\n}<\/pre><\/div>\n\n\n\n<p>This rule applies the \u201ctext-align: center;\u201d style to every item on a web page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS Descendant Selectors<\/h3>\n\n\n\n<p>CSS descendant selectors select an element that is a descendant of another element to which a range of styles should be applied. The syntax is to specify an element, followed by a space, followed by the descendant element you want to select.<\/p>\n\n\n\n<p>Suppose you want to set the background color of all links in a list to yellow. However, you do not want this style to affect any other links on the web page. You could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>li a {\n\tbackground-color: yellow;\n}<\/pre><\/div>\n\n\n\n<p>This style uses the \u201cli a\u201d descendant selector. This means the style we have created will only be applied to all <em>&lt;a&gt;<\/em> tags in an <a href=\"https:\/\/careerkarma.com\/blog\/html-lists\/\">HTML <em>&lt;li&gt;<\/em><\/a> tag. Our style will not apply to any other <em>&lt;a&gt;<\/em> tags that appear on our web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Selector Lists<\/h2>\n\n\n\n<p>If you have more than one element to which a specific style should be applied, you can use a selector list. Selector lists apply a rule to all the individual selectors in a list.<\/p>\n\n\n\n<p>Suppose we have two CSS rules with the same style rules. These are as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h2 {\n\ttext-align: center;\n}\n\n.alignCenter {\n\ttext-align: center;\n}<\/pre><\/div>\n\n\n\n<p>We could make our code easier to read by combining these two rules into a selector list. We can do so by adding a comma between our styles:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h2, .alignCenter {\n\ttext-align: center;\n}<\/pre><\/div>\n\n\n\n<p>This code functions in the same way as our first example. However, our second example uses a selector list which makes our code more concise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Grouping Selectors<\/h2>\n\n\n\n<p>The CSS grouping selector applies a set of styles to multiple selectors. It is used to reduce repetition and help you write clearer code. The syntax is a lits of element selectors separated by commas, followed by the CSS rules you want to apply to the elements.<\/p>\n\n\n\n<p>Let us suppose we are designing a web page that uses the following styles:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1 {\n\ttext-align: center;\n\tfont-size: 32px;\n\tfont-weight: normal;\n}\n\nh2 {\n\ttext-align: center;\n\tfont-size: 24px;\n\tfont-weight: normal;\n}\n\nh3 {\n\ttext-align: center;\n\tfont-size 18px;\n\tfont-weight: normal;\n}<\/pre><\/div>\n\n\n\n<p>In this code, the \u201cfont-weight: normal;\u201d and \u201ctext-align: center;\u201d styles are shared by all selectors. To reduce repetition in our code, we could group these styles together using a grouping selector. Here is the code we would use to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1, h2, h3 {\n\ttext-align: center;\n\tfont-weight: normal;\n}\n\nh1 {\n\tfont-size: 32px;\n}\n\nh2 {\n\tfont-size: 24px;\n}\n\nh3 {\n\tfont-size: 18px;\n}<\/pre><\/div>\n\n\n\n<p>We have grouped together two of the styles, text-align and font-weight, which were the same throughout every tag. This has allowed us to make our code easier to read.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/repl.it\/@careerkarma\/CSS-Selectors?lite=true\" width=\"100%\" height=\"400px\" frameborder=\"0\"><\/iframe>\n<br>\n<br>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>CSS selectors allow you to apply a style to a particular element or range of elements on a web page. There are a wide range of selectors offered by CSS. These include id selectors, class selectors, and grouping selectors, which you can use to create precise CSS styles.<\/p>\n\n\n\n<p>This article only scratched the surface of selectors in CSS. There are also attribute selectors, pseudo-classes and pseudo-elements, combinators, and other selectors which are used in CSS. If you are looking to develop more advanced rules, you may want to research these selectors in more depth.<\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, how to use the most commonly-used selectors in CSS. Now you have the knowledge you need to start using CSS selectors to create styles like an expert.<\/p>\n\n\n\n<p>For advice on top CSS learning resources, courses, and books, check out our <a href=\"https:\/\/careerkarma.com\/blog\/learn-css\/\">How to Learn CSS guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"CSS selectors select the elements to which you can apply styles. The most basic selector is the element selector, which selects an element by its name. Other selectors include the id, class, universal, and descendant selectors. Selectors are one of the two parts of any CSS statement. Selectors are used to target the elements on&hellip;","protected":false},"author":240,"featured_media":17609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-17608","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":null,"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 Selectors: A How-To Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS selectors.\" \/>\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-selectors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Selectors: A How-To Guide\" \/>\n<meta property=\"og:description\" content=\"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS selectors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\" \/>\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-12-08T09:12:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:05:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Selectors: A How-To Guide\",\"datePublished\":\"2020-12-08T09:12:21+00:00\",\"dateModified\":\"2023-12-01T12:05:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/\"},\"wordCount\":1377,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-screen-turned-on-159299.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/\",\"name\":\"CSS Selectors: A How-To Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-screen-turned-on-159299.jpg\",\"datePublished\":\"2020-12-08T09:12:21+00:00\",\"dateModified\":\"2023-12-01T12:05:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS selectors.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-screen-turned-on-159299.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/computer-screen-turned-on-159299.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-selectors\\\/#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 Selectors: A How-To Guide\"}]},{\"@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 Selectors: A How-To Guide | Career Karma","description":"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS 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:\/\/careerkarma.com\/blog\/css-selectors\/","og_locale":"en_US","og_type":"article","og_title":"CSS Selectors: A How-To Guide","og_description":"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS selectors.","og_url":"https:\/\/careerkarma.com\/blog\/css-selectors\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-08T09:12:21+00:00","article_modified_time":"2023-12-01T12:05:43+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Selectors: A How-To Guide","datePublished":"2020-12-08T09:12:21+00:00","dateModified":"2023-12-01T12:05:43+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/"},"wordCount":1377,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-selectors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/","url":"https:\/\/careerkarma.com\/blog\/css-selectors\/","name":"CSS Selectors: A How-To Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.jpg","datePublished":"2020-12-08T09:12:21+00:00","dateModified":"2023-12-01T12:05:43+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Selectors are used to select the HTML elements to which a style should be applied. On Career Karma, learn how to use CSS selectors.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-selectors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/05\/computer-screen-turned-on-159299.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-selectors\/#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 Selectors: A How-To Guide"}]},{"@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\/17608","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=17608"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/17608\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/17609"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=17608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=17608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=17608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}