CSS4

CSS 4

Изготвила: Бехидже Кьосе

• Negation – :not() pseudo-class

The :not()first appeared in CSS3, when it only allowed a maximum of 1
simple selector as an argument. In level 4 selectors, it can take a list of
selectors as an argument. The styles are applied to the elements which
are represented by the passed arguments.

Ex: E:not(s1, s2,..) { ...}
p:not(:first-child, .special) {
background: red;
}

• Matches - :matches() pseudo-class

The :matches() pseudo-class takes a list of selectors as an argument.
The styles are applied to the element which is represented by the
passed argument.

Ex.: Е:matches(s1,s2, ..) {…}
p:matches(:first-child, .special) {
color: red;
}

• Relational - :has() pseudo-class

The :has() pseudo-class takes a relative selector list as an argument.
Ex.: E:has(rs1, rs2) {…}
p:has(+img) {
color : red;
}

• Case-Sensitivity

Case-sensitivity matches any element whose specified attribute is
equal to a value of any case combination.

Ex.: E:[ attr=”val” i ] { /* Where "i" stands for case-insensitive. */ }
input[value=”name” I] {
/* In this example, all input elements containing
a value of name, Name, NAME, etc */ }

• Directionality - :dir() pseudo-class

The :dir() pseudo-class represents an element based on its
directionality, determined by the document language.

Ex: E:dir(direction)
blockquote:dir(ltr) {
border-left: 5px solid #555;
}

• Language - :lang() pseudo-class

The :lang() pseudo-class was introduces in CSS2. Level 4 selectors
adds wildcard matching. The language pseudo-class represents an
element that is in one of the languages listed as an argument.

Ex: E:lang(*-CA) {/* Where this matches anything ending in "*-CA". */}
p:lang(*-CA) { background-color: red; }

• Hyperlink - :any-link pseudo-class

The :any-link pseudo-class represents an element that acts as the
source anchor of a hyperlink (elements with an href attribute). In other
words, any element that would match :link and :visited.

Ex: E:any-link { /* Declaration */ }
#content a:any-link {
color : red;
text-decoration: none;
}

• Scope - :scope pseudo-class

The :scope pseudo-class represents any element that is a 'scope
element.' This is a (potentially empty) set of elements that provide a
reference point for selectors to match against, such as that specified by
the querySelector() call in DOM, or the parent element of a scoped
<style> element in HTML5.

Ex: E:scope { /* Declaration */ }

<div>
<p>This paragraph is outside the scope.</p>
<div>
<style scoped>
:scope { background : red; }
p { color: blue; }
</style>
<p> This paragraph is inside the scope. </p>
</div>

</div>
In this example, the second div will have a red background, but the first div
will not. Additionally, all paragraphs that are children of the second div will
have blue text.

• Time - dimensional

The time-dimensional pseudo-classes categorize elements with respect
to the currently active position in a timeline (i.e. speech rendering of a
document or video subtitles).
◦ :current
The :current pseudo-class matches an element that is currently being
displayed. It takes a selector list as an argument.
◦ :past
The :past pseudo-class matches any element that is defined to come
before a :current element.
◦ :future
The :future pseudo-class represents any element that is defined to come
after a :curren element.

Ex: E:current( s1, s2 ) { … }; E:past( s1, s2) { … }; E:future(s1, s2) { … }
:current(p, li) { color : red; }
:past(p, li) { color : green; }
:future(p, li) { color : blue; }

• Drag-and-Drop

The :drop pseudo-class matches any element that is a drop target,
while the user is dragging an item to be dropped.
The :drop() pseudo-class is similar to :drop, but allows additional filters
to be specified, to exclude some drop targets.

Ex. E:drop { ... }
:drop { border: 1px solid red ; }

• Indeterminate-Value

The :indeterminate pseudo-class matches UI elements whose value is
in an indeterminate state. An example of an element that can be in an
indeterminate state is radio and checkbox elements. They can be
checked, unchecked or neither (indeterminate).

Ex: :indeterminate { background-color : yellow; }

• Default option

The :default pseudo-class matches all UI elements that are default among a
set of similar elements. For example, the default button in a form, or the
initially selected <option> in a <select> element.

Ex: :default { background-color : green; }

• Validity

The validity pseudo-classes match valid or invalid <input> or <form>
elements.
:valid
The :valid pseudo-class represents an <input> element whose content
validates. This tells the user that their input is valid.
:invalid
The :invalid pseudo-class represents an <input> element whose content
does not validate. This tells the user that their input is invalid and must
be changed.

Ex: input:valid { outline: 1px solid green; }
input:invalid { outline: 1px solid red: }

• Range

The range pseudo-classes apply to elements with range limitations.
◦ :in-range

The :in-range pseudo-class represents an element whose value is
within its range.
◦ :out-of-range
The :out-of-range pseudo-class represents an element whose value
is outside of its range.

Ex.: input[type="number"]:in-range { background: green: }
input[type="number"]:out-of-range { background: red; }

• Optionality

The optionality pseudo-classes match <form> elements which are
required or optional.
◦ :required

The :required pseudo-class represents an <input> element with a
required attribute set on it.
◦ :optional
The :optional pseudo-class represents an <input> element does not
have a required attribute set on it.

Ex.: input : required { background: yellow ;}
input : optional { background-color: white; }

• USER-INTERACTION

The :user-error pseudo-class represents an input element with incorrect
input, but only after the user has interacted with it.

Ex. Input : user-error { background-color : red; }

• Mutability

The mutability pseudo-classes represents elements whose contents
are, or are not user-alterable.
:read-only
The :read-only pseudo-class represents an element that is not user-
alterable.
:read-write
The :read-write pseudo-class represents an element that is user-
alterable. This could be an input element or a contenteditable element
(HTML5 attribute).

Ex. :read-only { font-family : "Arial"; }
:read-write { font-family : "Courier New"; }

• Placeholder

The :placeholder-shown pseudo-class matches an input element that is
showing such placeholder text.

Ex. input : placeholder-shown { color : blue; }

• Tree-Structural

The tree-structural pseudo-classes were introduced in CSS3. In level 4
selectors, the :blank pseudo-class is added. These pseudo-classes
select elements in the document tree.
:blank
The :blank pseudo-class is similar to the :empty pseudo-class
(explained below), but it matches elements containing whitespace
(spaces, tabs and segment breaks).
:empty (CSS3)
The :empty pseudo-class was introduced in CSS3, but is required to
know to understand the :blank pseudo-class. This pseudo-class
matches elements with no content.

Ex. p : blank { margin : 0; }

• Descendant Combinato

The descendant combinator (E >> F) is essentially the same thing as E
F. It's just more straightforward and makes the code clearer.

Ex: p >> span { color : red; }

• Grid - structural

The grid-structural pseudo-classes apply to structural grids, such as
tables.
◦ :column(selector)

The :column() pseudo-class matches any cell belonging to a
column, in a grid or table, represented by the passed argument
(selector).
◦ :nth-column(n)
The :nth-column() pseudo-class matches any cell, in a grid or table,
belonging to the nth column in a grid or table.
◦ :nth-last-column(n)
The :nth-last-column() pseudo-class represents any cell belonging to
the nth column in a grid or table, counting from the last one.

Ex. :column( .selected ) { background : yellow; }
:nth-column(2n) { background: blue; }
:nth-last-column(3n+1) { background : red; }

• CSS Variables

element {
--main-bg-color: brown;

}
element {

background-color: var(--main-bg-color);
}
.class

--color-background ##FFBB00
background-color var --color-background

Източници : http://css4.rocks