Mahima Sabharwal (FED – Naukri.com)

CSS4 Selectors (Part 1)

CSS4 is a W3C working draft. Some modern browsers have already implemented.

Upcoming CSS4 selectors

Negation Matches Relational Case-sensitivity Directionality Language Hyperlink Scope Time-Dimentional Drag-Drop Validity

Today we’ll cover some of the selectors:

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 not represented

by the passed arguments.

Negation

Negation – Syntax

Negation – Example

Negation – Support

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.

Matches

Matches – Syntax

Matches – Example

Matches – Support

The :has() pseudo-class takes a relative selector list as an

argument.

Relational

Relational – Syntax

Relational – Example

Relational – Support

The case-sensitivity selector matches any element whose

specified attribute is equal to a value of any case combination.

Case-Sensitivity

Case-Sensitivity – Syntax

Case-Sensitivity – Example

Case-Sensitivity – Support

The :dir() pseudo-class represents an element based on its

directionality, determined by the document language.

DIRECTIONALITY

DIRECTIONALITY – Syntax

DIRECTIONALITY – Example

DIRECTIONALITY – Support

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.

Language

Language – Syntax

Language – Example

Language – Support

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.

Hyperlink

Hyperlink – Syntax

Hyperlink – Example

Hyperlink – Support

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.

Scope

Scope – Syntax

Scope – Example

Scope – Support

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 :current element.

Time-Dimensional

Time-Dimensional – Syntax

Time-Dimensional – Example

Time-Dimensional – Support

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.

Drag-and-Drop

Drag-and-Drop – Syntax

Drag-and-Drop – Example

Drag-and-Drop – Support

The validity pseudo-classes match valid or invalid <input> or <form>

elements.

An element without validity semantics is neither :valid nor :invalid.

: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

Validity

Validity – Syntax

Validity – Example

Validity – Support

Thank You!!!