JavaScript Tip: Using Pseudo-classes with querySelectorAll

preview_player
Показать описание
Because querySelector and querySelectorAll use CSS selectors for grabbing DOM elements, they can be very powerful. However, we sometimes forget what they are capable of. In this tutorial we delve a bit into that by using querySelectorAll with pseudo-classes.
For more resources on JavaScript:

Interested in some of our courses:

Tutorials referred to in this video:
  1. All Things JavaScript, LLC
  2. javascript
  3. javascript tip
  4. javascript tutorial
  5. tutorial
  6. training
Рекомендации по теме
JavaScript Tip: Using 0:08:49

JavaScript Tip: Using Pseudo-classes with querySelectorAll

CSS’s :target pseudo-class 0:00:28

CSS’s :target pseudo-class is surprisingly powerful

Learn CSS pseudo-classes 0:07:38

Learn CSS pseudo-classes in 7 minutes! ☟

Simplify your code 0:00:42

Simplify your code with this underused pseudo-class

Pseudo Classes - 0:03:40

Pseudo Classes - JavaScript

pseudo-classes can do 0:00:53

pseudo-classes can do more than you might think

Simplify Your CSS 0:09:22

Simplify Your CSS Using :is() and :where() Pseudo-Classes

CSS Tip - 0:00:54

CSS Tip - Using the Optional Pseudo Class #shorts

Solving JavaScript's Most 0:00:57

Solving JavaScript's Most NOTORIOUS Interview Question

CSS Tip - 0:00:54

CSS Tip - Using the 'has' Pseudo Class #shorts

Learn CSS Pseudo 0:07:50

Learn CSS Pseudo Elements In 8 Minutes

5 Years of 0:00:56

5 Years of Coding in under a Minute #shorts

CSS ft. Noob 0:00:08

CSS ft. Noob 😎 vs Pro 😁 Pseudo Classes 🚀 :is and :where

Simplify Your CSS 0:00:23

Simplify Your CSS with the Pseudo Class #css #html #coding

How to Target 0:00:48

How to Target pseudo Elements in JavaScript #JavaScript #CSS #Shorts

Using JS-Powered Custom 0:10:45

Using JS-Powered Custom Pseudo Classes from CSS

This Advanced Flexbox 0:00:57

This Advanced Flexbox Trick Is Amazing!

CSS Tips: Use 0:01:00

CSS Tips: Use Pseudo-Classes for Dynamic Styling!

CSS Tip #20 0:00:43

CSS Tip #20 - where( ) pseudo class #shorts

Before and After 0:09:08

Before and After pseudo elements explained - part one: how they work

The easiest improvement 0:00:46

The easiest improvement you can make to your CSS

CSS Pseudo Classes 0:01:00

CSS Pseudo Classes Explained - #11 autofill

Say Goodbye to 0:00:59

Say Goodbye to CSS Chaos with :is() Pseudo-Class Selector

How to select 0:06:45

How to select CSS pseudo element using javaScript

Комментарии
Автор

this was exactly what i was looking for, thanks

biscuitmanz
Автор

I was reading on this and the NodeList prototype does have a few methods including forEach(). In Chrome I do not need to convert into an array to use forEach() now. Great videos!

Dylan-fehn
Автор

In the event handler, i'm not sure what the 'this' keyword is referencing, but i'm guessing 'this' refers to the function parameter '(elem)', correct? or am I wrong?

romanmontoya
Автор

How can access and change a backgroundcolor and backgroundimage in a pseudo element after in javascript? Plsss answer me ASAP

dexterbiscopa
Автор

Hey how can we access/manipulate the contents of ::marker element using QuerySelectorAll? Any help would be great

ramraut
Автор

I'm kinda confused, I thought a statement returns an array by default. Why the second line of code then ?

joviruona
Автор

but when i try to store ::before pseudo element and console.log it to console it says *null*

whizzkkid