IT. Expert System.

CSS

CSS Selectors


CSS Selectors

A selector is a pattern that matches a set of elements in an HTML or XML document. The rules that appear in the block that belongs to the selector are applied to all elements that match this pattern (unless overridden by another rule in the cascade).

The following table summarizes the Selector syntax:

Selector Example Example Description CSS
.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div,p Selects all <div> elements and all <p> elements 1
element element div p Selects all <p> elements inside <div> elements 1
element>element div>p Selects all <p> elements where the parent is a <div> element 2
element+element div+p Selects all <p> elements that are placed immediately after <div> elements 2
[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower" 2
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en" 2
:link a:link Selects all unvisited links 1
:visited a:visited Selects all visited links 1
:active a:active Selects the active link 1
:hover a:hover Selects links on mouse over 1
:focus input:focus Selects the input element which has focus 2
:first-letter p:first-letter Selects the first letter of every <p> element 1
:first-line p:first-line Selects the first line of every <p> element 1
:first-child p:first-child Selects every <p> element that is the first child of its parent 2
:before p:before Insert content before  the content of every <p> element 2
:after p:after Insert content after every <p> element 2
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian) 2
element1~element2 p~ul Selects every <ul> element that are preceded by a <p> element 3
[attribute^=value] a[src^="https"] Selects every <a> element whose src attribute value begins with "https" 3
[attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute value ends with ".pdf" 3
[attribute*=value] a[src*="maui"] Selects every <a> element whose src attribute value contains the substring "maui" 3
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent 3
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent 3
:only-child p:only-child Selects every <p> element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3
:last-child p:last-child Selects every <p> element that is the last child of its parent 3
:root :root Selects the document’s root element 3
:empty p:empty Selects every <p> element that has no children (including text nodes) 3
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:enabled input:enabled Selects every enabled <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:checked input:checked Selects every checked <input> element 3
:not(selector) :not(p) Selects every element that is not a <p> element 3
::selection ::selection Selects the portion of an element that is selected by a user 3

Note: The CSS column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

Grouping Selectors

Often times in style sheets there are multiple selectors with the same style - as in the example below:

h1
{
  color:blue;
}

p
{
  color:blue;
}

To minimize the code, selectors can be grouped by specifying each separated by a comma - as in the grouped example below:

h1, p
{
  color:blue;
}

Nesting Selectors

Selectors can also be nested, meaning that a style can be applied for a selector within a selector.

The following example shows:
- one style applied to all p elements,
- one style that applies to all classes marked "highlighted", and
- one style that applies to all p elements within a class marked "highlighted":

p
{
  color:blue;
}

.highlighted
{
  background-color: yellow;
}

.highlighted p
{
  color:red;
}



Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 449 / . Delta: 0.02000 с