{"id":19586,"date":"2020-07-16T06:33:06","date_gmt":"2020-07-16T13:33:06","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19586"},"modified":"2020-12-29T11:31:50","modified_gmt":"2020-12-29T19:31:50","slug":"css-first-of-type","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/","title":{"rendered":"What is the CSS :First-of-Type Pseudo-Class?"},"content":{"rendered":"\n<p><em>Sometimes when we create our CSS, we want to target a certain element. Let\u2019s say if we had an HTML document full of <code>&lt;div&gt;<\/code> tags and <code>&lt;span&gt;<\/code> tags, but only wanted to target the first of each type to style it some way. We can do that with what\u2019s called the :first-of-type pseudo-class.<\/em><br><\/p>\n\n\n\n<p>A pseudo-class is a way for a CSS selector to have specific styles different from the original styles given. This is dependent on what state the element is in. In this instance, we want to select the first <code>&lt;div&gt;<\/code> and the first<code> &lt;span&gt; <\/code>so we can style it \u2013 no other spans or divs will be selected.&nbsp;<br><\/p>\n\n\n\n<p>Here is an example to get you started:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n \n &lt;head&gt;\n   &lt;style&gt;\n     body {\n       display: flex;\n       flex-flow: row wrap;\n     }\n     div {\n       height: 100px;\n       width: 200px;\n       border: 1px solid black;\n       margin: 20px;\n       padding: 20px;\n     }\n \n     \/* First of type *\/\n     div:first-of-type {\n       background: purple;\n       color: white;\n     }\n     div span:first-of-type {\n       color: red;\n       text-decoration: underline;\n       background: lightblue;\n     }\n \n   &lt;\/style&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n \n   &lt;div&gt;I am the first div&lt;span&gt; I am inside the div and the first span&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the second the div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the third div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the fourth div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the fifth div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the sixth div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n   &lt;div&gt;I am the seventh div&lt;span&gt; I am inside the div&lt;\/span&gt;&lt;span&gt; I am the second span&lt;\/span&gt;&lt;\/div&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Here we have a set of divs and spans inside those divs. The CSS selector <code>div:first-of-type<\/code> only selects the very first element of its type and styles it. The <code>div span:first-of-type<\/code> selects the first span in each div since the div is the parent element.&nbsp;<br><\/p>\n\n\n\n<p><code>div:first-of-type<\/code> would be the same as saying <code>div:nth-child(1)<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this article we took a look at the :first-of-type pseudo-class. We saw that a pseudo-class is basically just something that describes the state we want the CSS selector to be in when we style it. We also took a look at the general syntax. I would suggest taking a look at other pseudo-selectors and get a feel for them as well! <br><\/p>\n","protected":false},"excerpt":{"rendered":"Sometimes when we create our CSS, we want to target a certain element. Let\u2019s say if we had an HTML document full of &lt;div&gt; tags and &lt;span&gt; tags, but only wanted to target the first of each type to style it some way. We can do that with what\u2019s called the :first-of-type pseudo-class. A pseudo-class&hellip;","protected":false},"author":77,"featured_media":19587,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-19586","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>What is the CSS :First-of-Type Pseudo-Class? | Career Karma<\/title>\n<meta name=\"description\" content=\"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.\" \/>\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-first-of-type\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the CSS :First-of-Type Pseudo-Class?\" \/>\n<meta property=\"og:description\" content=\"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-first-of-type\/\" \/>\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-07-16T13:33:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:31:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\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=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"What is the CSS :First-of-Type Pseudo-Class?\",\"datePublished\":\"2020-07-16T13:33:06+00:00\",\"dateModified\":\"2020-12-29T19:31:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/\"},\"wordCount\":234,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/picture0.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/\",\"name\":\"What is the CSS :First-of-Type Pseudo-Class? | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/picture0.jpg\",\"datePublished\":\"2020-07-16T13:33:06+00:00\",\"dateModified\":\"2020-12-29T19:31:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/picture0.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/picture0.jpg\",\"width\":1000,\"height\":563},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-first-of-type\\\/#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\":\"What is the CSS :First-of-Type Pseudo-Class?\"}]},{\"@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\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is the CSS :First-of-Type Pseudo-Class? | Career Karma","description":"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.","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-first-of-type\/","og_locale":"en_US","og_type":"article","og_title":"What is the CSS :First-of-Type Pseudo-Class?","og_description":"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.","og_url":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-16T13:33:06+00:00","article_modified_time":"2020-12-29T19:31:50+00:00","og_image":[{"width":1000,"height":563,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"What is the CSS :First-of-Type Pseudo-Class?","datePublished":"2020-07-16T13:33:06+00:00","dateModified":"2020-12-29T19:31:50+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/"},"wordCount":234,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-first-of-type\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/","url":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/","name":"What is the CSS :First-of-Type Pseudo-Class? | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg","datePublished":"2020-07-16T13:33:06+00:00","dateModified":"2020-12-29T19:31:50+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"CSS pseudo-classes can be helpful when we want to target a specific element in our code. In this article, we\u2019ll take a look at the :first-of-type pseudo-class and what it does when we use it.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-first-of-type\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/picture0.jpg","width":1000,"height":563},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-first-of-type\/#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":"What is the CSS :First-of-Type Pseudo-Class?"}]},{"@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\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19586","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\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19586"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19586\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19587"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}