{"id":5762,"date":"2010-03-17T04:55:23","date_gmt":"2010-03-17T11:55:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5762"},"modified":"2026-03-25T09:43:59","modified_gmt":"2026-03-25T15:43:59","slug":"pseudo-class-selectors","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/pseudo-class-selectors\/","title":{"rendered":"Meet the Pseudo Class\u00a0Selectors"},"content":{"rendered":"\n<p class=\"is-style-explanation\"><strong>Editor&#8217;s Note:<\/strong> This article was a super thorough overview of existing pseudo class selectors when it was originally published in 2010, and has had several updates since then. But even more recently, CSS has released a bunch of new pseudo selectors \u2014 so many, in fact, that it&#8217;s tough to keep an article like this current. Instead, <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/\">check out the CSS-Tricks Almanac<\/a> for a more complete collection, including in-depth tutorials and examples for each one.<\/p>\n\n\n\n<p>Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a:hover {\n  \/* Yep, hover is a pseudo class *\/\n}<\/code><\/pre>\n\n\n\n<p>They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2&#8230; it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support for them. The link-related ones work but not much else. Let&#8217;s take a brief look at each one of them. Don&#8217;t worry, there aren&#8217;t that many.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"link-related-pseudo-class-selectors\">Link-related pseudo class selectors<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/l\/link\/\"><code>:link<\/code><\/a>\u00a0\u2013 Perhaps the most confusion-causing link-related pseudo-selector. Aren\u2019t all\u00a0<code>&lt;a><\/code>\u00a0links? Well not if they don\u2019t have an href attribute. This selects only those that do, thus is essentially the same as <code>a[href]<\/code>. This selector will become a lot more useful should\u00a0<a href=\"http:\/\/meyerweb.com\/eric\/thoughts\/2008\/07\/23\/any-element-linking-demo\/\" rel=\"noopener\">any-element linking<\/a>\u00a0become reality.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/v\/visited\/\"><code>:visited<\/code><\/a> &#8211; Selects links that have already been visited by the current browser.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/h\/hover\/\"><code>:hover<\/code><\/a> &#8211; When the mouse cursor rolls over a link, that link is in its hover state and this will select it.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/a\/active\/\"><code>:active<\/code><\/a> &#8211; Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the &#8220;pressed&#8221; state of a button-style link or to <a href=\"https:\/\/css-tricks.com\/one-pixel-shift-buttons\/\">make all links feel more button-like<\/a>.<\/p>\n\n\n\n<p>There is a fun technique to remember all the link pseudo-class selectors. Look at the first letter of each: LVHA &#8230; <a href=\"https:\/\/css-tricks.com\/remember-selectors-with-love-and-hate\/\"><strong>L<\/strong>O<strong>V<\/strong>E <strong>HA<\/strong>TE<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"input-link-related-pseudo-class-selectors\">Input &amp; link related pseudo class selectors<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/f\/focus\/\"><code>:focus<\/code><\/a> &#8211; Defining hover styles for links is great, but it doesn&#8217;t help out those who used keyboard navigation to get to the link. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well. <a href=\"http:\/\/antonpeck.com\/journal\/article\/focus_on_the_hover\/\" rel=\"noopener\">Some would tell you<\/a> to define a :focus style for anything that has a :hover style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"293\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/03\/formwithfocus.png?resize=392%2C293\" alt=\"Form with a text input in focus. Yellow background is a focus style.\" class=\"wp-image-393171\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/03\/formwithfocus.png?w=392&amp;ssl=1 392w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/03\/formwithfocus.png?resize=300%2C224&amp;ssl=1 300w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/t\/target\/\"><code>:target<\/code><\/a> &#8211; The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. So if you are at URL www.yoursite.com\/#home then the selector <tt>#home:target<\/tt> will match. That can be extremely powerful. For example, you can create a <a href=\"https:\/\/css-tricks.com\/css3-tabs\/\">tabbed area<\/a> where the tabs link to hash tags and then the panels &#8220;activate&#8221; by matching <code>:target<\/code> selectors and (for example) using z-index to move to the top.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/e\/enabled\/\"><code>:enabled<\/code><\/a> &#8211; Selects inputs that are in the default state of enabled and ready to be used.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/\"><code>:disabled<\/code><\/a> &#8211; Selects inputs that have the <tt>disabled<\/tt> attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/disabledelements.png\" alt=\"\" title=\"\"\/><figcaption class=\"wp-element-caption\">Form using the <code>:disabled<\/code> attribute.<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/c\/checked\/\"><code>:checked<\/code><\/a> &#8211; Selects checkboxes that are, wait for it, checked.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/indeterminate-checkboxes\/\"><code>:indeterminate<\/code><\/a> &#8211; Selects radio buttons that are in the purgatory state of neither chosen or unchosen (like when a page loads with radio button choices but no default is set).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/radiopurgatory.png\" alt=\"\" title=\"\"\/><figcaption class=\"wp-element-caption\">Set of radio buttons in purgatory. Or more accurately, in their :indeterminate status.<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/r\/required\/\"><code>:required<\/code><\/a> &#8211; Selects inputs with the <code>required<\/code> attribute.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/o\/optional\/\"><code>:optional<\/code><\/a> &#8211; Selects inputs that do not have the <code>required<\/code> attribute.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/r\/read-write-read\/\"><code>:read-only<\/code> \/ <code>:read-write<\/code><\/a> &#8211; Selects elements based on a combination of <code>readonly<\/code> and <code>disabled<\/code> attriutes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"position-number-based-pseudo-class-selectors\">Position\/Number-based pseudo class selectors<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/r\/root\/\"><code>:root<\/code><\/a> &#8211; Selects the element that is at the root of the document. Almost certainly will select the  element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/f\/first-child\/\"><code>:first-child<\/code><\/a> &#8211; Selects the first element within a parent.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/l\/last-child\/\"><code>:last-child<\/code><\/a> &#8211; Selects the last element within a parent.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/n\/nth-child\/\"><code>:nth-child()<\/code><\/a> &#8211; Selects elements based on a simple provided algebraic expression (e.g. &#8220;2n&#8221; or &#8220;4n-1&#8221;). Has the ability to do things like select even\/odd elements, &#8220;every third&#8221;, &#8220;the first five&#8221;, and things like that. Covered in <a href=\"https:\/\/css-tricks.com\/how-nth-child-works\/\">more detail here<\/a> with a <a href=\"https:\/\/css-tricks.com\/examples\/nth-child-tester\/\">tester tool<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/n\/nth-of-type\/\"><code>:nth-of-type()<\/code><\/a> \u2013 Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won\u2019t work there, you\u2019d use\u00a0<code>div img:nth-of-type(odd)<\/code>. Particularly useful when working with definition lists and their alternating\u00a0<code>&lt;dt><\/code>\u00a0and\u00a0<code>&lt;dd><\/code>\u00a0elements.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/f\/first-of-type\/\"><code>:first-of-type<\/code><\/a> &#8211; Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then <tt>div img:first-of-type<\/tt> would select the first image inside the first div and the first image inside the second div.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/l\/last-of-type\/\"><code>:last-of-type<\/code><\/a> &#8211; Same as above, only would select the last image inside the first div and the last image inside the second div.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/n\/nth-last-of-type\/\"><code>:nth-last-of-type()<\/code><\/a> &#8211; Works like :nth-of-type, but it counts up from the bottom instead of the top.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/n\/nth-last-child\/\"><code>:nth-last-child()<\/code><\/a> &#8211; Works like :nth-child, but it counts up from the bottom instead of the top.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/o\/only-of-type\/\"><code>:only-of-type<\/code><\/a> &#8211; Selects only if the element is the only one of its kind within the current parent.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/relationalpseudos2.png\" alt=\"\" title=\"\"\/><figcaption class=\"wp-element-caption\">Position\/Number-based pseudo class selectors<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"relational-pseudo-class-selectors\">Relational pseudo class selectors<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/n\/not\/\"><code>:not()<\/code><\/a> &#8211; Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs <em>except<\/em> those with a class of &#8220;music&#8221; = <tt>div:not(.music)<\/tt>. The spec says that :not selectors cannot be nested, but they can be chained. Some browsers (Firefox) also support comma-separated selectors as the selector parameter, although chaining them would be a far safter bet. Also useful in conjunction with attribute selectors, e.g. <tt>input:not([disabled])<\/tt>.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/e\/empty\/\"><code>:empty<\/code><\/a> &#8211; Selects elements which contain no text and no child elements. Like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element:empty { background: red; }<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"text-related-pseudo-class-selectors-elements\">Text-related pseudo class selectors \/ elements<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/f\/first-line\/\"><code>::first-letter<\/code><\/a> &#8211; Selects the first letter of the text in the element. Typical use: drop caps.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/\"><code>::first-line<\/code><\/a> &#8211; Selects the first line of text in the element. Typical use: setting the first sentence in small caps as a typographical eye-catcher\/lead-in.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/l\/lang\/\"><code>:lang<\/code><\/a> &#8211; This pseudo selector is in the CSS3 spec but is only implemented in IE 8+. Will match anything that either has or is a descendant of an element with a matching lang attribute. For example, <code>:lang(fr)<\/code> will match any paragraph, even without a lang attribute, if the parent body had <code>lang=\"fr\"<\/code> as an attribute.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"quick-note\">Quick note<\/h4>\n\n\n<p>You can chain pseudo selectors just like you can <a href=\"https:\/\/css-tricks.com\/multiple-class-id-selectors\/\">chain class and ID selectors<\/a>. This is particularly useful here while we are looking at <code>:first-letter<\/code> and <code>:first-line<\/code>. You probably wouldn&#8217;t want to drop cap every single paragraph on the page, but just the first one, so, <code>p:first-child:first-letter {   }<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/dropcap.png\" alt=\"\" title=\"\"\/><figcaption class=\"wp-element-caption\">Dropcap using :first-letter, which enlarges the font size and floats to the left.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"content-related-pseudo-elements\">Content-related pseudo &#8220;elements&#8221;<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/b\/after-and-before\/\"><code>::before<\/code><\/a> &#8211; Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.<\/p>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/b\/after-and-before\/\"><code>::after<\/code><\/a> &#8211; Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/clear-fix\/\">clearfix<\/a>, where an empty space is added after the element which clears the float without any need for extra HTML markup.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"pseudo-elements-vs-pseudo-classes\">Pseudo Elements vs. Pseudo Classes<\/h4>\n\n\n<p>The above two selectors are appropriately called pseudo &#8220;elements&#8221; (not selectors) because they don&#8217;t select any &#8220;real&#8221; element that exists on the page. This goes for these two, as well as the previous sections <code>::first-letter<\/code> and <code>::first-line<\/code>. Make sense? Like the first letter that <code>::first-letter<\/code> selects isn&#8217;t an element all to itself, it&#8217;s just a part of an existing element, hence, pseudo element.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Selector Style<\/th><th>Name<\/th><th>Does<\/th><th>Specificity<\/th><\/tr><tr><td><code>::<\/code><\/td><td>pseudo <strong>element<\/strong><\/td><td>selects\/creates some actual <strong>content<\/strong><\/td><td>0 0 0 1<\/td><\/tr><tr><td><code>:<\/code><\/td><td>pseudo <strong>class<\/strong><\/td><td>selects <strong>elements<\/strong> in certain conditions<\/td><td>0 0 1 0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"tag-qualification\">Tag Qualification<\/h3>\n\n\n<p>These selectors can be tag-qualified, meaning they will only apply if <em>both<\/em> the element (tag) and selector match. For instance:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p:first-child {\n  color: red;\n}<\/code><\/pre>\n\n\n\n<p>That will only match if the first child of another element is a&nbsp;<code>&lt;p&gt;<\/code>. If it\u2019s not, it won\u2019t match.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"deprecated\">Deprecated<\/h3>\n\n\n<p><code>:contains()<\/code> &#8211; As far as I know, this is gone. The current CSS3 spec has removed it. I don&#8217;t know the story, let me know if you do. At a glance, it looks ridiculously useful (being able to select objects based on the textual content they contain). It may be because of problems, or having content in selectors being undesirable. My preference would be to have it select by elements rather than text, like <code>p:contains(img)<\/code>, but alas, no such luck. <\/p>\n\n\n\n<p class=\"is-style-explanation\"><strong>Update:<\/strong> There is <a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/h\/has\/\">a<code>:has()<\/code> selector<\/a> now!<\/p>\n\n\n\n<p><s><code>::selection<\/code> &#8211; Allows the changing of style of selected text. It was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. Despite this, it&#8217;s implemented in some browsers, which will probably retain experimental support for it. For Firefox, you can use ::-moz-selection. <a href=\"https:\/\/css-tricks.com\/overriding-the-default-text-selection-color-with-css\/\">More information here<\/a>.<\/s> <\/p>\n\n\n\n<p class=\"is-style-explanation\">Update: <code><a href=\"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/s\/selection\/\">::selection<\/a><\/code> is totally standard now, go ahead and use it!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"jquery-usage\">jQuery Usage<\/h3>\n\n\n<p>jQuery can use all of these in its selectors, which is awesome. Even <em>awesomer<\/em>, jQuery has additional pseudo class selectors available.<\/p>\n\n\n\n<p><code>:first<\/code> &#8211; Matches the first instance of the <em>already matched<\/em> set. This is different than :nth-child(1) which will only select if the selector matches <em>and<\/em> it&#8217;s the first child. With :first, the selector matches, then it takes the first one it finds regardless of child position.<\/p>\n\n\n\n<p><code>:eq()<\/code> &#8211; <del>jQuery doesn&#8217;t support <code>:nth-of-type<\/code> as a part of it&#8217;s selector engine, but this is very similar.<\/del><ins>It <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/wfgeD\" rel=\"noopener\">does now<\/a>.<\/ins> This selects the Xth element from the already-matched set. It&#8217;s also zero-indexed (0 is the first element) unlike <code>:nth-child<\/code> in which the first element is 1.<\/p>\n\n\n\n<p><code>:contains('text')<\/code> &#8211; This is removed from CSS, but it works in jQuery.<\/p>\n\n\n\n<p><code>:lt()<\/code> &#8211; The same as :nth-child(-n+X), as in it selects the &#8220;first X elements&#8221;<\/p>\n\n\n\n<p><code>:gt()<\/code> &#8211; The same as :nth-child(n+X), as in it selects everything except the &#8220;first (X-1) elements&#8221;<\/p>\n\n\n\n<p><code>:even<\/code> &#8211; The same as <code>:nth-child(even)<\/code> or <code>:nth-child(2n)<\/code><\/p>\n\n\n\n<p><code>:odd<\/code> &#8211; The same as <code>:nth-child(odd)<\/code> or <code>:nth-child(2n+1)<\/code><\/p>\n\n\n\n<p><code>:has()<\/code> &#8211; Tests if the element has a descendant of a certain selector before matching, like <code>:has(\"div.intro\")<\/code>.<\/p>\n\n\n\n<p>There are actually a whole bunch more, and all of them are clever and useful (or at least an improvement on readability) See the <a href=\"http:\/\/api.jquery.com\/category\/selectors\/\" rel=\"noopener\">selector documentation<\/a> for more.<\/p>\n\n\n\n<p class=\"is-style-explanation\">jQuery can&#8217;t really help you with pseudo <em>elements<\/em> like <code>::before<\/code> and <code>::after<\/code>, but you can <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/Pzzawj\" rel=\"noopener\">access their values in some browsers<\/a>. E.g if a div had some <code>::before<\/code> generated content, you could get the value like:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">var div = document.querySelector(\"div\");\n\nvar content = window\n  .getComputedStyle(div, '::before')\n  .getPropertyValue('content');<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"specificity\">Specificity<\/h3>\n\n\n<p>Class selectors and pseudo class selectors have the same specificity weight. Pseudo elements have the specificity of an element selector.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li             {} \/* specificity = 0,0,0,1 *\/\nli:first-child {} \/* specificity = 0,0,1,1 *\/\nli:first-line  {} \/* specificity = 0,0,0,2 *\/\nli.red         {} \/* specificity = 0,0,1,1 *\/<\/code><\/pre>\n\n\n\n<p>Typically they are used in conjunction or listed afterwards in CSS anyway, so hopefully it won&#8217;t cause too many problems&#8230;<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">ul li.friend { margin: 0 0 5px 0; }\nul li:last-child { margin: 0; }<\/code><\/pre>\n\n\n\n<p>In that case the zeroing out of the margin would work (assuming it matched the same element), but only because the zeroing out is listed second (they have the same specificity). So&#8230; watch for that.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Editor&#8217;s Note: This article was a super thorough overview of existing pseudo class selectors when it was originally published in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1383,741],"class_list":["post-5762","post","type-post","status-publish","format-standard","hentry","category-articles","tag-pseudo-classes","tag-selectors"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":176856,"url":"https:\/\/css-tricks.com\/how-css-selectors-work\/","url_meta":{"origin":5762,"position":0},"title":"Beginner Concepts: How CSS Selectors Work","author":"Chris Coyier","date":"August 9, 2014","format":false,"excerpt":"Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting. In\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":378745,"url":"https:\/\/css-tricks.com\/css-selectors\/","url_meta":{"origin":5762,"position":1},"title":"CSS Selectors","author":"Geoff Graham","date":"July 15, 2024","format":false,"excerpt":"A complete guide covering all of the various methods we have to select elements in CSS and how to use them for applying styles.","rel":"","context":"In &quot;Guides&quot;","block_context":{"text":"Guides","link":"https:\/\/css-tricks.com\/category\/guides\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/css-selectors-guide-thumb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/css-selectors-guide-thumb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/css-selectors-guide-thumb.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/css-selectors-guide-thumb.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/07\/css-selectors-guide-thumb.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":342736,"url":"https:\/\/css-tricks.com\/nth-child-between-two-fixed-indexes\/","url_meta":{"origin":5762,"position":2},"title":":nth-child Between Two Fixed Indexes","author":"Chris Coyier","date":"June 29, 2021","format":false,"excerpt":"I needed to select some elements between two fixed indexes the other day\u2009\u2014\u2009like literally the second through fifth elements. Ironically, I have a whole post on \"Useful :nth-child Recipes\" but this wasn't one of them. The answer, it turns out, isn't that complicated. But it did twist my brain a\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/nth-selector.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":164669,"url":"https:\/\/css-tricks.com\/thoughts-media-queries-elements\/","url_meta":{"origin":5762,"position":3},"title":"Thoughts on Media Queries for Elements","author":"Chris Coyier","date":"March 4, 2014","format":false,"excerpt":"Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was,\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375144,"url":"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/","url_meta":{"origin":5762,"position":4},"title":"Taming the Cascade With BEM and Modern CSS Selectors","author":"Liam Johnston","date":"November 21, 2022","format":false,"excerpt":"BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is \u2013 at least in my Twitter bubble \u2013 one of the better-liked CSS methodologies. Personally, I think BEM is good, and I think you should use it.\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/is-where-funnels.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":312524,"url":"https:\/\/css-tricks.com\/css-is-and-where-are-coming-to-browsers\/","url_meta":{"origin":5762,"position":5},"title":"CSS :is() and :where() are coming to browsers","author":"Chris Coyier","date":"June 10, 2020","format":false,"excerpt":"\u0160ime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful: :is() is to reduce repetition\u00b9 of parts of comma-separated selectors. :where() is the same, but nothing inside it affects specificity. The example of wrapping :where(:not()) is really great, as now there is a way\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/is-where-pseudo.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5762"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5762\/revisions"}],"predecessor-version":[{"id":393177,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5762\/revisions\/393177"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}