{"id":14244,"date":"2011-09-06T20:25:49","date_gmt":"2011-09-07T03:25:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14244"},"modified":"2019-09-05T19:24:38","modified_gmt":"2019-09-06T02:24:38","slug":"only-of-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-of-type\/","title":{"rendered":":only-of-type"},"content":{"rendered":"
The If no tag precedes the selector, it will match any tag (e.g. One list contains only a single list item. Another list contains three list items. We can target the list item that is alone with Although perhaps that isn’t the best example, because As a fun aside, you could achieve the same selection as The :only-of-type pseudo-class selector in CSS represents any element that has no siblings of the given type. p:only-of-type { color: red; } If no tag precedes the selector, it will match any tag (e.g. :only-of-type). If another selector precedes it, it will matched based on the type of tag that selector matches. For example .example:only-of-type […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14240,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[5657],"acf":[],"jetpack-related-posts":[{"id":14242,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/only-child\/","url_meta":{"origin":14244,"position":0},"title":":only-child","date":"September 6, 2011","format":false,"excerpt":"The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has no other element children. This would be the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. div p:only-child { color: red; } For example, if we nest paragraphs\u2026","rel":"","context":"In \":only-child\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14244,"position":1},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14273,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/t\/type\/","url_meta":{"origin":14244,"position":2},"title":"Type","date":"September 6, 2011","format":false,"excerpt":"A Type Selector (sometimes referred to as an Element Type Selector) matches elements with the corresponding element node name, such as , , and tags. Type selectors are generally used to make \"broad stroke\" changes to the style of a site. p { \/* \"p\" is the type selector *\/\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":14244,"position":3},"title":"::file-selector-button","date":"August 30, 2022","format":false,"excerpt":"The ::file-selector-button in CSS is a pseudo-element that selects in HTML. input::file-selector-button { background-color: #f8a100; } You've undoubtedly come across file upload inputs \u2014 they're very common, especially for including file attachments in a form, like a PDF or image. CodePen Embed Fallback Syntax selector::file-selector-button { } You\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":148076,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/04-jquery-selectors-css3-selectors\/","url_meta":{"origin":14244,"position":4},"title":"#04: jQuery Selectors are CSS3 Selectors","date":"August 25, 2013","format":false,"excerpt":"In CSS, you can select all elements on the page with this: h1 { \/* style all elements *\/ } In jQuery, you can use that exact same selector. $(\"h1\") \/\/ set of all elements In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14230,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/nth-child\/","url_meta":{"origin":14244,"position":5},"title":":nth-child","date":"September 6, 2011","format":false,"excerpt":"The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. \/* Select the first list item *\/ li:nth-child(1) { } \/* Select the 5th list item *\/ li:nth-child(5) { } \/* Select every other list item starting with first *\/\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14244"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14244"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14244\/revisions"}],"predecessor-version":[{"id":295422,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14244\/revisions\/295422"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14240"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14244"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}:only-of-type<\/code> pseudo-class selector<\/a> in CSS<\/abbr> represents any element that has no siblings of the given type.<\/p>\n
p:only-of-type {\r\n color: red;\r\n}<\/code><\/pre>\n
:only-of-type<\/code>). If another selector precedes it, it will matched based on the type of tag that selector matches. For example
.example:only-of-type<\/code> will behave like
p:only-of-type<\/code> if
.example<\/code> is applied to a paragraph element.<\/p>\n
Simple Example<\/h3>\n
:only-of-type<\/code>.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
:only-child<\/code> would work just as well there since list items are the only possible children of lists. If we use divs instead, we could target a paragraph inside a div if it’s the only paragraph, despite other elements being in there as well.<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
To Note<\/h3>\n
:only-of-type<\/code> with
:first-of-type:last-of-type<\/code> or
:nth-of-type(1):nth-last-of-type(1)<\/code>. Those use two chained selectors though, meaning the specificity is double that of
:only-of-type<\/code>.<\/p>\n
Related Properties<\/h3>\n
\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n IE9+<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"