Css Advanced Selectors Cheat Sheet

Since CSS has so many selectors and declarations that might be hard to remember, we’ve put together a complete CSS and CSS3 Cheat Sheet to help you master the language. Download CSS Cheat Sheet in.pdf Download CSS Cheat Sheet in.jpg Once you’ve downloaded the CSS Cheat Sheet, save the file to your device or print one out. View CSSCheatSheet.pdf from CS 101 at California State University, Northridge. CSS Cheat Sheet Selectors Selector Example Description. Selects all elements element div Selects all div. In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Complete CSS Cheat Sheet. Whether you are a savvy web developer or just someone who wants to.

Home > Tutorials and Resources > CSS Selectors Cheat Sheet

Most web developers learn CSS by first writing style rules that target the HTML elements on the page because. the element selector is easy to understand and the results are immediate and obvious. With a little CSS practice, grouped selectors become essential to reducing redundancy because they allow us to apply the same style properties to multiple elements separated with commas in a single style rule.

The disadvantage of using element and grouped selectors of course, is that they are universally applied. And it doesn't take long before the need to format one particular element arises. The simplest solution for most developers is to use class selectors and ID selectors to target specific elements. But unfortunately, the tendency is to overuse them and end up with pages that suffer from class-itis.

Instead of mucking around with the markup by adding classes and id's to elements simply for styling purposes, consider using advanced CSS selectors to apply formatting to target elements. The many advanced selectors are generally categorized into contextual selectors, attribute selectors, pseudo-element selectors, and pseudo-class selectors.

Element selectors

Element selectors apply properties globally to all specified elements on the page, and are the most common selectors used.

Syntax for Element selectors
Selector	Syntax	Description
Element	h2	selects all h2 elements on the page The rule h2 {text-align: center;} would center all text marked up with <h2> elements
Grouped	h1, h2, h3	selects all h1, h2, and h3 elements on the page The rule h1, h2, h3 {margin-bottom: .5em;} would set the bottom margin for all text marked up with <h1>, <h2>, and <h3> elements

Class and ID selectors

Class and ID selectors make it easy to target and apply properties to one or several particular elements without affecting all the others. Classes allow you to classify elements into conceptual groups. Two or more elements can belong to the same class on a page. IDs assign a unique identifier to an element, and each id value must be used only once on a page.

Syntax for Class and ID selectors
Selector	Syntax	Description
Class	.warning p.warning	selects all elements belonging to the warning class selects only paragraph elements belonging to the warning class Note: <p> classifies the <p> into a conceptual group
ID	#links	selects the element with the links id value Note: <ul> assigns the links unique identifier to the element

Contextual selectors

Contextual selectors (combinators) target elements based on their relationships to other elements in the document's tree hierarchy, and use the same parent, child, sibling, and descendant terminology.

Syntax for Contextual selectors
Selector	Syntax	Description
Descendant	#main li	selects elements only when they are descendants of a higher-level element Note: target element does not have to be a direct child; descendant can be further down in hierarchy
Adjacent sibling	h2+p	selects sibling element that is adjacent to (next to) another element (if there are several <p> elements following the <h2> element, only the first <p> is the adjacent sibling)
Child	blockquote>p	selects elements only when they are child elements of the parent element
General sibling	h2~p	selects any elements that are siblings to another element (if there are several <p> elements following the <h2> element, all are siblings)

Pseudo-class selectors

Pseudo-class selectors are used to apply styles to elements based on their browser state or position in document hierarchy. Browsers keep track of many things behind the scenes, like whether a link has been visited, when an element is selected, and whether an element is the first or last of its type, or even the first or last child of its parent element.

All elements in a certain state are treated as though they belong to the same class, even though the class name is not actually in the markup. Pseudo-class selectors are indicated by a colon (:), and are typically placed immediately after the element name.

Pseudo-class selectors for link and user states

When styling all link states, the order of the rules in the style sheet is important for proper functionality. Required order is :link, :visited, :focus, :hover, :active.

Syntax for link and user state Pseudo-class selectors
State	Syntax	Description
Unvisited link	:link	applies to link elements that have not been visited (a:link)
Visited link	:visited	applies to link elements that have been visited (a:visited)
Focus state	:focus	applies to selected element that is ready for input (a:focus or input:focus) Note: focus state most often applies to users who use a keyboard to tab through links and form controls, but some elements can also be given focus with markup and scripts.
Hover state	:hover	applies when mouse pointer is over the element (a:hover)
Active state	:active	applies when element is in process of being clicked (a:active)

Pseudo-class selectors that apply to siblings

The following six sibling pseudo-class selectors apply to elements that have the same parent, and are at the same level of the document hierarchy.

Syntax for sibling Pseudo-class selectors
Syntax	Description
:first-child	selects the specified element when it is the first child of its parent (h2:first-child selects a <h2> element only when it's the first element within its parent)
:last-child	selects the specified element when it is the last child of its parent (h2:last-child selects a <h2> element only when it's the last element within its parent)
:only-child	selects the specified element when it is the only child of its parent (h2:only-child selects a <h2> element only when it's the only element within its parent)
:first-of-type	selects the first element of the specified type within its parent element (li:first-of-type selects the first <li> element)
:last-of-type	selects the last element of the specified type within its parent element (li:last-of-type selects the last <li> element)
:only-of-type	selects the only element of the specified type within its parent element (blockquote p:only-of-type selects the only <p> inside a <blockquote> element)

The :first-child, :last-child, and :only-child pseudo-classes are very specific. When a targeted element is no longer the first, last, or only child of its parent, the style rule no longer applies.

The other pseudo-classes are far more flexible. When you add or remove a targeted element, the browser will still automatically apply the style to the first and last element, or to the element that has no siblings of the same type.

Css Selectors Cheat Sheet

CSS3 structural Pseudo-class selectors

The new CSS3 pseudo-class selectors can style elements based on their position within a series in the document hierarchy. Горячие клавиши office for mac.

Syntax for CSS3 structural Pseudo-class selectors
Syntax	Description
:nth-child(n)	nth child of parent
:nth-last-child(n)	nth child of parent counting backwards
:nth-of-type(n)	nth element of its type within parent
:nth-last-of-type(n)	nth element of its type counting backwards

Use the following typical n values to target elements.

Typical n values for CSS3 Structural Pseudo-class Selectors
Value	Meaning
odd 2n+1	every odd child or element
even 2n	every even child or element
n	every nth child or element
3n	every third child or element (3, 6, 9, …)
3n+1	every third child or element starting with 1 (1, 4, 7, …)

Pseudo-element selectors

Pseudo-element selectors allow you to style fictional elements that are not actually in the markup. The ::first-letter and ::first-line selectors target a portion of an element to avoid use of inline <span> element. The ::before and ::after selectors are used to insert content dynamically that doesn't exist in the markup. Download utorrent for free mac.

CSS3 uses a double colon for pseudo-elements. To provide backward compatibility for older browsers, omit one of the colons that precede the pseudo-elements (ie :first-letter)

Syntax for Pseudo-elements
Syntax	Description
::first-letter	selects the first letter of the specified element (p::first-letter selects only the first letter of the <p> element) commonly used with ::first-child to create a drop cap in first paragraph
::first-line	selects the first line of the specified element (p::first-line selects only the first line of the <p> element) commonly used with ::first-child to add visual impact to the first line of the first paragraph
::before	adds generated content before the specified element when used with content property (q::before {content: '201c';} generates a left double quote before the <q> element)
::after	adds generated content after the specified element when used with content property (q::after {content: '201d';} generates a right double quote after the <q> element)

Common uses of generated content:

Css Selectors Selenium Cheat Sheet

To find Unicode Characters:
- XHTML Character Entity Reference - Hover over a character box to display the characters numerical code (“) and its Unicode code (u201c).
  NOTE: For generated content with ::before and/or ::after pseudo-elements, use only the hexadecimal part--the part after the 'u'--and be sure to escape the code by preceding with a backslash ' character.

Attribute selectors

Css Selectors Cheat Sheet Pdf

Attribute selectors target elements based on the presence or value of a specific attribute. Of the seven attribute selectors in the table below, the last three are new in CSS3, and are not yet fully supported by all browsers.