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:
and, what is very important, you can combine selectors. For the conditional selectors, it is a part of the function, so they are always combined with one of the other types of 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.

SelectorExampleEffect
elementSUBSelect all the specified elements/tags, in this case SUB.
element,elementDIV, PSelect all the specified elements/tags, separated by comme, in this case all DIV and all P elements/tags
element elementDIV PSelect all the specified elements in second position 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 as LI UL, where you want to display subsections in lists with something other than the standard circle.
element > elementDIV > PSelect all P elements, where the parent element is a DIV
element + elementDIV + PSelect all P elements placed right after a DIV element.
element ~ elementP ~ ULSelect all UL elements, preceded by a P element.
**Select all elements. The usability of this is debatable. If you needed some styling on all tags, you would style the BODY tag instead.



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 few restrictions.

SelectorExampleEffect
.Class.TestSelect all elements with CLASS="Test"
#id#NameSelect all elements with ID="Name"
[attribute][TITLE]Select all elements having a specific attribute, e.g. all tags having TITLE or ID
[attribute=value][TARGET=_blank]Select all elements where the specified attribute has the specified value, e.g. TARGET="_blank"
[attribute~=value][TITLE~=leaf]Select all elements where the specified attribute contain the specified value, i.e. in the example shown here, all elements/tags where the TITLE attribute contain the word "leaf". Same effect as [attribute*=value], only this is CSS2 instead of CSS3.
[attribute|=value][TITLE|=leaf]Select 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". Same effect as [attribute^=value], only this is CSS2 instead of CSS3.
[attribute^=value]a[href^="https"]Udvælger attributter hvis værdi starter med en given værdi. I det viste eksempel alle A tags hvor HREF-attributten starter med "https". Kan det samme som [attribute|=value], men er CSS3 i stedet for CSS2.
[attribute$=value]A[HREF$=".pdf"]Udvælger alle elementer, hvor den specificerede attribut slutter med den specificerede streng. I det viste tilfælde alle A-tags hvor HREF-attributten slutter med ".pdf"
[attribute*=value]A[HREF*="html-hajen"]Udvælger alle elementer, hvor den specificerede attribut indeholder den specificerede streng. I det viste tilfælde alle A-tags hvor HREF-attributten indeholder tekststrengen "html-hajen". Kan det samme som [attribute~=value], men er CSS3 i stedet for 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, something happens or has to be done. Contrary to tags and attributes, this type of selectors can't 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.

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
SelectorExampleEffect
:activea:activeSelect the active link, i.e. what happens/how it looks the moment you click on it.
:linka:linkSelect 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).
:visiteda:visitedUdvælger alle links man har klikket på, dvs. links til sider man har besøgt (according to the cookies in your browser history, that is).
:target#HeadLine:targetUdvælger det aktive element med #HeadLine, dvs. det link man har klikket på.



Selectors for INPUT
SelectorExampleEffect
:checkedINPUT:checkedSelect all marked INPUT elements
:disabledINPUT:disabledSelect all disabled INPUT elements
:enabledinput:enabledSelect all enabled INPUT elements
:focusINPUT:focusSelect all INPUT elements in focus, e.g. an input field being written in.
:in-rangeINPUT:in-rangeSelect all INPUT elements (element values) within a specified interval
:invalidINPUT:invalidSelect all INPUT elements with an invalid value
:optionalINPUT:optionalSelect all INPUT elements where the REQUIRED attribute hasn't been specified
:out-of-rangeINPUT:out-of-rangeSelect all INPUT elements (element values) outside a specified interval
:read-onlyINPUT:read-onlySelect all INPUT elements where the READONLY attribute has been specified
:read-writeINPUT:read-write USelect all INPUT elements where the READONLY attribute has't been specified
:requiredINPUT:requiredSelect all INPUT elements where the REQUIRED attribute has been specified
:validINPUT:validSelect all INPUT elements with a valid value



General selectors
SelectorExampleEffect
::afterP::afterIndsætter det man specificerer i style sheetet efter indholdet af det specifierede element, i det viste eksempel efter indholdet af alle P-tags
::beforeP::beforeIndsætter det man specificerer i style sheetet foran indholdet af det specifierede element, i det viste eksempel før indholdet af alle P-tags
:emptyP:emptyUdvælger alle elementer, der ikke har children/child elements, inklusiv text nodes. I det viste eksempel alle P-tags uden children
:first-childLI:first-child Udvælger det første child element for alle de specificerede parent elements. I det viste eksempel vil det være det første punkt på bullet listerne. Kan også gøre med :nth-child(1).

::first-letterP::first-letterUdvælger det første bogstat i indholdet af det specificerede element. I det viste eksempel vil det være det første bogstav i inholdet af alle P-tags
::first-lineP::first-lineUdvælger det første linje af indholdet af det specificerede element. I det viste eksempel vil det være det første linje af inholdet af alle P-tags
:first-of-typeP:first-of-type Udvælger det første element af den specificerede type i forhold til siblings. I det viste eksempel alle P-tags som er det første blandt dets siblings
:hoverA:hoverUdvælger elementer/tags som man holder cursoren over (mouse over). I det viste eksempel et link, men denne selector kan bruges generelt på tags.

:lang(language)DIV:lang(da)Udvælger elementer/tags hvor et givent sprog er specificeret. I det viste eksempel en DIV hvor sproget er specificeret til at være dansk.
:last-childLI:last-childUdvælger det sidste child element for alle de specificerede parent elements. I det viste eksempel vil det være det sidste punkt på bullet listerne.

:last-of-typeP:last-of-typeUdvælger den det sidste element af den specificerede type i forhold til siblings. I det viste eksempel alle P-tags som er det sidste blandt dets siblings
:not(selector):not(P)Udvælger alle elementer, som ikke er det specificerede. I det viste tilfælde alle tags, som ikke er P-tag'en
:nth-child(n)LI:nth-child(2)Udvælger det specificerede nummer i rækken af de specificerede child elements. I det viste tilfælde det andet punkt på bulletlisterne.

:nth-last-child(n)LI:nth-last-child(2)Udvælger det specificerede nummer i rækken af de specificerede child elements, talt bagfra. I det viste tilfælde det næstsidste punkt på bulletlisterne.

:nth-last-of-type(n)P:nth-last-of-type(2)Udvælger det nummer i rækken af den specificerede type elementer, i forhold til siblings, talt bagfra. I det viste eksempel alle P-tags som er det næstsidste, blandt siblings som er P-tags.
:nth-of-type(n)P:nth-of-type(2)Udvælger det nummer i rækken af den specificerede type elementer, i forhold til siblings. I det viste eksempel alle P-tags som er det det andet i rækken, blandt siblings som er P-tags
:only-of-typeP:only-of-typeUdvælger det specificerede element, som er det eneste af sin type blandt siblings. Note: Fungerer også hvis der ikke er siblings. I det viste eksempel P-tags hvor alle siblings, hvis der er nogen, er andre tags.
:only-childP:only-childUdvælger det specificerede element, som er enebarn, dvs. ingen siblings. I det viste eksempel alle P-tags, som ikke har siblings
:root:rootUdvælger dokumentets rod-element, hvilket for HTML vil sige BODY-tag'en
::selection
::-moz-selection
::selectionUdvælger den del af elementet som markeres af brugeren. Bemærk: For også at fungerer med Firefox, skal man også have en ::-moz-selection