![CSS3 Selectors Techhyme](https://techhyme.com/wp-content/uploads/2022/04/CSS3-Selectors-Techhyme.jpg)
CSS3 features an entire toolbox of new selectors that allow you to select more specific elements for styling while nullifying the need for a lot of those arbitrary IDs and classes you tend to often include to select “the last item in the list,” or “the first paragraph in the post that always contains the introduction.
For more detailed reference, please visit www.w3.org/community/webed/wiki/Advanced_CSS_selectors.
Below is the list of some of the most powerful and interesting ones (as well as some seldom-explored selectors first included in CSS2) to give you a good flavor of what selectors are now capable of.
S.NO. | SELECTOR | EXAMPLE | DESCRIPTION | BROWSER SUPPORT |
---|---|---|---|---|
1 | Universal | * | Selects everything on the page. | All |
2 | Attribute | img[alt] | Selects all of the specified elements that have the specified attribute. Ideal for accessibility testing if you want to highlight images with and without alt attributes. | Not IE6 or earlier. |
img[src=”alert.gif”] | Selects all of the specified elements that have the specified attribute with the specified value. Useful for selecting specific images or other elements without needing extra IDs or classes. | Not IE6 or earlier. | ||
img[src = alert ] | Selects all of the specified elements that have the specified string at the start of the attribute value. | Not IE6 or earlier. | ||
img[src$=”gif”] | Selects all of the specified elements that have the specified string at the start of the attribute value | Not IE6 or earlier | ||
a[href*=”uk”] | Selects all of the specified elements that have the specified string somewhere inside the attribute Value. These are useful for adding special styling or icons to specific content for example, links to resources just about the UK or links to PDFs. | Not IE6 or earlier | ||
article[class~= “feature”] | Selects all of the specified elements that have the specified string inside the attribute value, but only if it is a single value in a space delimited list of values. | Not IE6 or earlier | ||
article[id|=”feature”] | Selects all of the specified elements that have the specified string inside the attribute value, but only if it is a single value in a hyphen-delimited list of values. These last two selectors might be Potentially useful if you are trying to select elements based on some kind of horrible tagging system inserted into attributes by a CMS. | Not IE6 or earlier | ||
3 | Descendant | nav a | Selects the element on the right only if it is nested somewhere inside the element(s) to the left. You can chain more than two together.
For example, nav li a. |
All. |
4 | Child | body>header | Selects the element on the right only if it is nested somewhere inside the element(s) to the left. You can chain more than two together .
For example, body>header |
Not IE6 or earlier |
5 | Adjacent sibling | h1 + p | Selects the element on the right only if it comes immediately after the element on the left in the source order, and they are siblings at the same nesting level. It’s perfect if, for example, you set paragraphs to have an indent on the first line but want to remove that indent for the first line after each heading. | Not IE6 or earlier |
6 | General sibling | h1 ~ img | Selects the element on the right only if it is a sibling (at the same nesting level) as the element on the left. It’s great for setting that indent mentioned giving a special styling only to images inside an article at the same level as a heading. | Not IE6 or earlier |
7 | UI element pseudo-classes | a:link | Styles the default state of link | All |
a:visited | Styles links when they’ve already been visited | All | ||
img:hover | Style elements when they’re hovered over | All | ||
input:focus | Style element when they’re given focus (e.g. with the keyboard) | All | ||
a:active | Styles links while they are being activated (e.g. by being clicked on ) | All | ||
input:valid | Styles form inputs that contain valid data. These types of selectors are very useful for giving users hints about whether their form data is valid or not. | Not supported in IE. | ||
input:invalid | Styles form inputs that contain invalid data. | Not supported in IE. | ||
input:enabled | Styles enabled form inputs. | All | ||
input:disabled | Styles disabled form inputs. | All | ||
input:in-range | Styles form inputs that contain data that is inside the valid range. | Not supported in IE. | ||
input:out-of-range | Styles form inputs that contain data that is outside the valid range. | Not supported in IE. | ||
8 | Negation selector | input:not([type=”submit”]) | Styles the specified element if it isn’t selected by the simple selector(s) inside the parentheses. This is useful in cases where you have several similar elements and want to select them all except for one of two.
For example, when laying out a form you’ll want to give most of the inputs an equal width but not the submit or file inputs. You can include multiple selectors to negate inside the parentheses in a comma-delimited list. For example, input:not ([type=”submit”],[type=”file”]). |
Not IE8 or earlier. |
9 | Language selector | p:lang(en-US) | Styles the specified element only if it has the language inside the parentheses set on it via the lang attribute. | Not IE6 or earlier. |
10 | Target selector | article:target | Styles the element only if it is the target of a link. It’s incredibly cool for making content appear at the click of a button, such as overlays, information boxes, or different tabs in a tabbed interface, with- out needing JavaScript. The main problem is that each new state will be at a different URL, so it can break the expected Back button functionality. | Not IE8 or earlier. |
11 | Structural pseudo-classes | :root | Styles the root element of the document, which is pretty much always <html>! | Not IE8 or earlier |
li:nth-child(2n+1) | In a series of child elements, styles the elements specified by the formula in the parentheses. So, for example, this formula would select all odd- numbered list items (1,3,5 etc.). It’s great for zebra striping to enhance readability. | Not IE8 or earlier | ||
li:nth-last-child(2n+1) | Works the same as nth-child but starts at the last element and works backwards. | Not IE8 or earlier | ||
p:nth-of-type(3) | Works the same as nth-child but ignores elements not of the type specified. I usually use this just to earlier. Select a single child element or a certain type. | Not IE8 or earlier | ||
:nth-last-of-type(1) | Works the same as nth-of-type, except that it counts backwards from the last child element. | Not IE8 or earlier | ||
p:first-child | Selects the first child in a series of child elements, if it is of the type specified. | Not IE8 or earlier | ||
p:first-of-type | Selects the last child in a series of child elements, | Not IE8 or earlier | ||
li:only-child | Selects the only child of an element if it is of the type specified. This is useful if, for example, you earlier. Want to give list items a special styling only if there is one list item present. You might want to omit the bullet point because it is pointless and looks silly if there is only one bullet! | Not IE8 or earlier | ||
section p:only-of-type | Selects the specified element if it is the only one of its type inside its parent. | Not IE8 or earlier | ||
:empty | Selects an element only if it has no children. | Not IE8 or earlier | ||
12 | Pseudo-elements | p:first-letter | Selects the first letter inside an element. It’s perfect for making drop caps! | Not IE6 or earlier |
p:first-line | Selects the first line of text inside an element. This is good for giving an intro paragraph an interesting look-for example, putting the first line in small caps. | Not IE6 or earlier | ||
a:before | Allows you to generate content before the specified element for example, adding icons before certain earlier. Content. | Not IE7 or earlier. | ||
a:after | Allows you to generate content after the specified content- for example placing a copyright symbol earlier. After certain pieces of content. | Not IE7 or earlier |
- Top 20 Active Directory (AD) Attack Methods
- The Top 10 Free VPNs Which Are Safe and Allow You to Access Blocked Content
- Seattle Airport Hit by Possible Cyberattack, Websites & Phone Systems Were Impacted
- How to Choose the Best E-Commerce Web Hosting for Maximum Uptime
- Choosing the Right Website Hosting – A Comprehensive Guide
- Top 20 Cybersecurity Training Platforms
- Essential Tips for Choosing the Perfect Web Hosting Plan
- 40 Commonly Targeted Ports by Hackers
- Top 8 Best Ethical Hacking Tools
- Host-Based Intrusion Prevention Systems (HIPS) – Features, Mechanisms, and Limitations