html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Basics

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.

CSS Selectors By Type
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 1/2 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 1/2 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 1/2 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 1/2 Advanced Lesson 2 - Attribute Selectors


CSS Colors    <<Prev




go to home page Homepage go to top of page Top