Selectors for CSS
What is it?
Selectors is a way of identifying, or rather selecting, what you want to style in your style sheet.
Selectors can be divided into three types:
Note that some selectors use double colon, instead of single colon. This is for the CSS3 standard. If you use single colon, it becomes CSS2.
Selectors can be divided into three types:
- elements (i.e. tags)
- attributes
- conditional selectors
Note that some selectors use double colon, instead of single colon. This is for the CSS3 standard. If you use single colon, it becomes CSS2.
Elements as selector
Elements/tags are some of the most common selectors for CSS. As shown on the current page, you can combine attributes, tags and conditional selectors more or less as you please.
| Selector | Example |
| element | SUB Selects all the specified elements/tags, in this case SUB. |
| element,element | DIV, P Selection/grouping of specified elements/tags, separated by comma, in this case, all DIV and all P elements/tags |
| element element | DIV P Selects the element specified in the second position when inserted in the elements specified in first position. In the shown example, all P elements in DIV elements: <DIV><P></P></DIV>. This combination is often used in lists, where you want to display subsections in lists the same way across browsers (the default bullet for this is not the same for all browsers) e.g. a square: UL UL {list-style-type:square}. |
| element > element | DIV > P Selects all P elements, where the parent element is a DIV |
| element + element | DIV + P Selects all P elements placed right after a DIV element. |
| element ~ element | P ~ UL Selects all UL elements, preceded by a P element. |
| * | * Selects all elements. The usability of this is debatable. If you needed some styling on all tags, you would style the BODY tag instead. If you need to specify that you are searching in the HTML namespace, you use html|* instead. Writing |* means all elements without a namespace and it is equivalent to *. |
Attributes as selector
Because the attributes contain quite a lot of information, it often makes sense to select on these. The classics in CSS are classes and ID, and radiobuttons uses NAME for keeping track of radiobuttons belonging to the same group, but there is quite a long list of options. As the examples in this page shows, you can combine attributes, tags and conditional selectors with only a few restrictions.
| Selector | Example |
| .Class | .Test Selects all elements with CLASS="Test" |
| #id | #Name Selects all elements with ID="Name" |
| [attribute] | [TITLE] Selects all elements having a specific attribute, e.g. all tags having TITLE or ID |
| [attribute=value] | [TARGET=_blank] Selects all elements where the specified attribute has the specified value, e.g. TARGET="_blank". The value must be in one word (hyphens are allowed). |
| [attribute~=value] | [TITLE~=leaf] Selects all elements where the specified values occurs somewhere in the specified attribute, i.e. in the example shown here, all elements/tags where the TITLE attribute contains the word "leaf". The value must be in one word (hyphens are allowed). Same effect as [attribute*=value], only this is CSS2 instead of CSS3. |
| [attribute|=value] | [TITLE|=leaf] Selects all elements where the specified attribute start with the specified value, i.e. in the example shown here, all elements/tags where the TITLE attribute begin with the word "leaf". The value must be in one word (hyphens are allowed). Same effect as [attribute^=value], only this is CSS2 instead of CSS3. |
| [attribute^=value] | A[HREF^="https"] Selects all elements with attributes starting with the specified value. In the example showh here, all A tags where the HREF attribute start with "https". The value must be in one word (hyphens are allowed). Same function as [attribute|=value], but this is CSS3 instead of CSS2. |
| [attribute$=value] | A[HREF$=".pdf"] Selects all elements with the specified attribute ending with the specified value. The value must be in one word (hyphens are allowed). In the example shown here, all A tags where the HREF attribute ends with ".pdf" |
| [attribute*=value] | A[HREF*="html-shark"] Selects all elements where the specified attribute contains the specified value. In the example shown here, all the A tags where the HREF attribute contains the text "html-shark". The value must be in one word (hyphens are allowed). Same function as [attribute~=value], but this is CSS3 instead of CSS2. |
Conditional selectors
The conditional selectors are those reacting to some sort of incident. This can be both a direct action, e.g. mouse over, or indirect action, like at a specific tag or attribute, where something happens or has to be done. Contrary to tags and attributes, this type of selectors cannot work alone. As a minimum, they need a tag or an attribute, but can, apart from this limitation, be combined with attributes, tags and other conditional selectors with only a few limitations, e.g. P LI::after or P,LI::after won't work, in that case, you have to use a workaround, e.g. using ID or CLASS.
For conditional selectors some of them only work in connection with one specific tag, so therefore the list is divided into specific and general selectors.
Selectors for links
Selectors for INPUT
General selectors
For conditional selectors some of them only work in connection with one specific tag, so therefore the list is divided into specific and general selectors.
Selectors for links
| Selector | Example |
| :active | A:active Selects the active link, i.e. what happens/how it looks the moment you click on it. |
| :link | A:link Selects all links that haven't been clicked, i.e. link to pages you haven't visited (according to the cookies in your browser history, that is). |
| :visited | A:visited Selects all links that have been clicked, i.e. links to pages you have visited (according to the cookies in your browser history, that is). |
| :target | #HeadLine:target Selects the active element containing #HeadLine, i.e. it formats the element with the specified ID on the page (which doesn't have to be a link) when hovering over the element with the selector code. |
Selectors for INPUT
| Selector | Example |
| :checked | INPUT:checked Select all marked INPUT elements |
| :disabled | INPUT:disabled Select all disabled INPUT elements |
| :enabled | input:enabled Select all enabled INPUT elements |
| :focus | INPUT:focus Select all INPUT elements in focus, e.g. an input field being written in. |
| :in-range | INPUT:in-range Select all INPUT elements (element values) within a specified interval |
| :invalid | INPUT:invalid Select all INPUT elements with an invalid value |
| :optional | INPUT:optional Select all INPUT elements where the REQUIRED attribute hasn't been specified |
| :out-of-range | INPUT:out-of-range Select all INPUT elements (element values) outside a specified interval |
| :read-only | INPUT:read-only Select all INPUT elements where the READONLY attribute has been specified |
| :read-write | INPUT:read-write Select all editable INPUT elements (i.e. where the READONLY attribute has not been applied) |
| :required | INPUT:required Select all INPUT elements where the REQUIRED attribute has been specified |
| :valid | INPUT:valid Select all INPUT elements with a valid value |
General selectors
| Selector | Example |
| ::after | LI::after Inserts what is specified in the style sheet after the specified element's content. In this example after the content in all LI tags. |
| ::before | P::before Inserts what is specified in the style sheet before the specified element's content. In this example after the content in all P tags |
| :empty | P:empty Selects all elements without children/child elements, including text nodes. In the example shown here, all P tags without child elements |
| :first-child | LI:first-child Selects the first child element in all the specified parent elements. In the example shown here, it would be the first item in the bullet lists. This can also be done using :nth-child(1). |
| ::first-letter | P::first-letter Selects the first letter in the specified element's content. In the example shown here, it is the first letter in all the P tags' content |
| ::first-line | P::first-line Selects the specified element's first line. In the example shown here, it is the first line in all the P tags' content |
| :first-of-type | P:first-of-type Selects the first element of the specified type among siblings. In the example, all P tags that are occurring first amoung its siblings |
| :hover | A:hover Selects elements/tags that the cursor is hovering above (mouse over). In the example shown here, it is a link, but this selector can be used generally on tags. |
| :lang(language) | DIV:lang(da) Selects elements/tags where the requested languate is specified. In the example, a DIV where the language is specified as Danish. |
| :last-child | LI:last-child Selects the last child element for all the specified parent elements. In the example shown here, that would be the last item on the bullet lists. |
| :last-of-type | P:last-of-type Selects the last elements of their type among siblings. In the example, all P tags that are the last among their siblings |
| :not(selector) | :not(P) Selects all alements that are not the specified ones. In the example shown here, all tags that are not the P tag |
| :nth-child(n) | LI:nth-child(2) Selects the specified occurence of the specified child elements. In the example shown here, the second item on the bullet lists. |
| :nth-last-child(n) | LI:nth-last-child(2) Specifies the item number on the list, counting from the last item, for the specified child elements. In the example shown here, the penultimate items on the bullet lists. |
| :nth-last-of-type(n) | P:nth-last-of-type(2) Selects the element number of the specified element type, counted from the last item. In the example shown here, the penultimate element with a P tag. |
| :nth-of-type(n) | P:nth-of-type(2) Selects the element number of the specified element type. In the example shown here, the second element with a P tag. |
| :only-of-type | P:only-of-type Selects the specified element, which is the only one of its kind among its siblings. Note: Also works if no siblings are present. In the example shown here, P tags where all its siblings are some other tag. |
| :only-child | P:only-child Selects the specified element which is an only child, i.e. no siblings. In the example shown here, all P tags, without siblings |
| :root | :root Selects the document's root element. For HTML this is the BODY tag |
| ::selection ::-moz-selection |
::selection Selects the part of the element marked by the user. Note: To work with Firefox also, you also need a ::-moz-selection |