Clarification needed for CSS selector

Question

Can someone please explain the below CSS code:

html:not([dir="rtl"]){
    //some CSS property
}

Matheus Avellar · Accepted Answer · 2017-03-09 23:14:13Z

3

html:not([dir="rtl"])

Let's break it down!

html

Selects all html elements (there's most likely only one)...

:not( ... )

... that do not...

[dir="rtl"]

... have the attribute dir set to "rtl".

So, to sum it up, it selects all html elements that do not have dir set to "rtl". Example:

<html>  <!-- Would match! -->

<html lang="en">  <!-- Would match! -->

<html dir>  <!-- Would match! -->

<html dir="ltr">  <!-- Would match! -->

<html dir="rtl">  <!-- Would NOT match! -->

edited Mar 9, 2017 at 23:14

answered Mar 9, 2017 at 23:08

Matheus Avellar

1,5151 gold badge23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shashank Shekhar Over a year ago

It has only to do with html tag. Other tags won't be affected. Correct?

Matheus Avellar Over a year ago

Correct! If you did *:not([dir="rtl"]) it would match any tag that had dir="rtl" (because * is the universal selector)

Shashank Shekhar Over a year ago

it would match any tag that did / 'did not' have dir="rtl" ??

Matheus Avellar Over a year ago

Oh, my bad! That did not have dir="rtl"

Nenad Vracar · Accepted Answer · 2017-03-09 23:10:16Z

1

That is :not() pseudo-class and inside is attribute selector, so it will select html if it doesn't have dir="rtl" attribute which is text-direction set right to left.

answered Mar 9, 2017 at 23:10

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

It will select all html tags that don't have the attribute dir with value rtl.

Each part:

Select html tag: html

Select the inverse: :not()

Select an attribute with specific value: [attribute="value"]

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 9, 2017 at 23:06

Andrew Leedham

7307 silver badges16 bronze badges

1 Comment

Shashank Shekhar Over a year ago

By everything, you mean only html tags. Correct?

Collectives™ on Stack Overflow

Clarification needed for CSS selector

3 Answers 3

4 Comments

Comments

Each part:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Each part:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related