[@naukriengineering] css4 selectors – part 1
TRANSCRIPT
![Page 1: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/1.jpg)
Mahima Sabharwal (FED – Naukri.com)
CSS4 Selectors (Part 1)
![Page 2: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/2.jpg)
CSS4 is a W3C working draft. Some modern browsers have already implemented.
Upcoming CSS4 selectors
![Page 3: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/3.jpg)
Negation Matches Relational Case-sensitivity Directionality Language Hyperlink Scope Time-Dimentional Drag-Drop Validity
Today we’ll cover some of the selectors:
![Page 4: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/4.jpg)
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
![Page 5: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/5.jpg)
Negation – Syntax
![Page 6: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/6.jpg)
Negation – Example
![Page 7: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/7.jpg)
Negation – Support
![Page 8: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/8.jpg)
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
![Page 9: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/9.jpg)
Matches – Syntax
![Page 10: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/10.jpg)
Matches – Example
![Page 11: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/11.jpg)
Matches – Support
![Page 12: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/12.jpg)
The :has() pseudo-class takes a relative selector list as an
argument.
Relational
![Page 13: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/13.jpg)
Relational – Syntax
![Page 14: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/14.jpg)
Relational – Example
![Page 15: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/15.jpg)
Relational – Support
![Page 16: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/16.jpg)
The case-sensitivity selector matches any element whose
specified attribute is equal to a value of any case combination.
Case-Sensitivity
![Page 17: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/17.jpg)
Case-Sensitivity – Syntax
![Page 18: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/18.jpg)
Case-Sensitivity – Example
![Page 19: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/19.jpg)
Case-Sensitivity – Support
![Page 20: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/20.jpg)
The :dir() pseudo-class represents an element based on its
directionality, determined by the document language.
DIRECTIONALITY
![Page 21: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/21.jpg)
DIRECTIONALITY – Syntax
![Page 22: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/22.jpg)
DIRECTIONALITY – Example
![Page 23: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/23.jpg)
DIRECTIONALITY – Support
![Page 24: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/24.jpg)
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
![Page 25: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/25.jpg)
Language – Syntax
![Page 26: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/26.jpg)
Language – Example
![Page 27: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/27.jpg)
Language – Support
![Page 28: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/28.jpg)
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
![Page 29: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/29.jpg)
Hyperlink – Syntax
![Page 30: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/30.jpg)
Hyperlink – Example
![Page 31: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/31.jpg)
Hyperlink – Support
![Page 32: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/32.jpg)
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
![Page 33: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/33.jpg)
Scope – Syntax
![Page 34: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/34.jpg)
Scope – Example
![Page 35: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/35.jpg)
Scope – Support
![Page 36: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/36.jpg)
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
![Page 37: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/37.jpg)
Time-Dimensional – Syntax
![Page 38: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/38.jpg)
Time-Dimensional – Example
![Page 39: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/39.jpg)
Time-Dimensional – Support
![Page 40: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/40.jpg)
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
![Page 41: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/41.jpg)
Drag-and-Drop – Syntax
![Page 42: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/42.jpg)
Drag-and-Drop – Example
![Page 43: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/43.jpg)
Drag-and-Drop – Support
![Page 44: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/44.jpg)
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
![Page 45: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/45.jpg)
Validity – Syntax
![Page 46: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/46.jpg)
Validity – Example
![Page 47: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/47.jpg)
Validity – Support
![Page 48: [@NaukriEngineering] CSS4 Selectors – Part 1](https://reader031.vdocuments.net/reader031/viewer/2022021922/5883041f1a28abe70d8b6111/html5/thumbnails/48.jpg)
Thank You!!!