CODEWITHSUNDEEP
css
Shashank Shekhar
Shashank Shekhar

Reputation: 351

Clarification needed for CSS selector

Can someone please explain the below CSS code: 

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

Upvotes: 0

Views: 43

Answers (3)

Andrew Leedham
Andrew Leedham

Reputation: 718

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"]

Upvotes: 1

Matheus Avellar
Matheus Avellar

Reputation: 1515

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! -->

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122027

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.

Upvotes: 1

Related Questions