CSS Selectors By TypeS2C Home « CSS Selectors By Type
We can use selectors, which are a form of pattern, to select elements for styling.
There are seven types of selector patterns to choose from:
universal, class, id, element, psuedo-class, psuedo-element and attribute.
Click on an Associated Lesson to see how the CSS selector is used.
| Type | Selector | Example | Description | Associated Lesson |
|---|---|---|---|---|
| Universal | ||||
| All Elements | * | * | Selects all elements for styling. | CSS Basic Lesson 4 - Basic Tag Selectors |
| Class | ||||
| Class Styled | .class | .intro | Selects all elements with an attribute of class=intro for styling. | CSS Basic Lesson 4 - Basic Tag Selectors |
| ID | ||||
| ID Styled | #id | #para1 | Selects the element with an attribute of id=para1 for styling. | CSS Basic Lesson 4 - Basic Tag Selectors |
| Element | ||||
| Single | element | p | Selects all <p> elements for styling. | CSS Basic Lesson 4 - Basic Tag Selectors |
| Multiple | element,element | p,img | Selects all <img /> and <p> elements for styling. | CSS Int. Lesson 3 - Advanced Tag Selectors |
| Descendant | element element | p img | Selects all <img /> elements within <p> elements for styling. | CSS Int. Lesson 3 - Advanced Tag Selectors |
| Child | element>element | div>p | Selects all <p> elements that have an immediate <div> element parent. | CSS Int. Lesson 3 - Advanced Tag Selectors |
| Adjacent Sibling | element+element | div+p | Selects all <p> elements that directly follow a <div> element. | CSS Int. Lesson 3 - Advanced Tag Selectors |
| Pseudo Class | ||||
| Active Link | :active | a:active | Selects all univisited links. | CSS Int. Lesson 4 - Pseudo Selectors |
| First Child | :first-child | p:first-child | Selects the first child of <p> elements. | CSS Int. Lesson 4 - Pseudo Selectors |
| User Focus | :focus | input:focus | Selects user focus (when an <input> element is clicked on or tabbed to). | CSS Int. Lesson 4 - Pseudo Selectors |
| Mouseover Links | :hover | a:hover | Selects links that have the mouse hovering over them. | CSS Int. Lesson 4 - Pseudo Selectors |
| Language | :lang(language) | p:lang(fr) | Selects <p> elements matching the language code (French in the example). | CSS Int. Lesson 4 - Pseudo Selectors |
| Unvisited Links | :link | a:link | Selects all univisited links. | CSS Int. Lesson 4 - Pseudo Selectors |
| Visited Links | :visited | a:visited | Selects all visited links. | CSS Int. Lesson 4 - Pseudo Selectors |
| Pseudo Element | ||||
| First Letter | :first-letter | p:first-letter | Selects the first letter of <p> elements. | CSS Int. Lesson 4 - Pseudo Selectors |
| First Line | :first-line | p:first-line | Selects the first line of <p> elements. | CSS Int. Lesson 4 - Pseudo Selectors |
| Before Element | :before | p:before | Adds content before <p> elements. | CSS Int. Lesson 4 - Pseudo Selectors |
| After Element | :after | p:after | Adds content after <p> elements. | CSS Int. Lesson 4 - Pseudo Selectors |
| Attribute | ||||
| Attribute Match | [attribute] | p[id] | Selects all <p> elements that have an id attribute. | CSS Advanced Lesson 2 - Attribute Selectors |
| Exact Value Match | [attribute=val] | p[class="at"] | Selects all <p> elements that have a class attribute that exactly matches the value "at". | CSS Advanced Lesson 2 - Attribute Selectors |
| Contains Value Match | [attribute~=val] | p[title~="at"] | Selects all <p> elements that have a title attribute that contains the word "at". | CSS Advanced Lesson 2 - Attribute Selectors |
| Subcode Match | [attribute|=val] | p[lang|="en"] | Selects all <p> elements that have a lang attribute that matches "en" or values starting with "en" immediately followed by a hyphen and another value such as "en-us". | CSS Advanced Lesson 2 - Attribute Selectors |
Homepage
Top