2

Please explain me what is the meaning of "[dir]" in following css:

[dir] .layoutContainer {
  background: #fff;
  box-shadow: 0 1px 0 rgba(57,76,96,.15);
  padding: 8px;
}

Thank you!

Tho Bui Ngoc
  • 763
  • 1
  • 11
  • 36
  • 1
    What does the HTML look like? That looks like it's trying to select a `.layoutContainer` element that's a child of an element with a `dir` attribute, but without context it's a guess. – disinfor Aug 27 '20 at 04:27
  • I don't think it has any meaning at all – Bekim Bacaj Aug 27 '20 at 04:33

1 Answers1

4

It is just a attribute. Check out this snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        [dir]{
            background-color: red;
        }

        [dir] .layoutContainer {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div dir='aa'>A<span class='layoutContainer'>B</span>C</div>
    <div dir='aa'>A</div>
    <div dir='aa'>A</div>

    <br>

    <b dir='bb'>Bo<span class='layoutContainer'>l</span>d</b>

    <br>

    <h1 dir>He<span class='layoutContainer'>ad</span>ing</h1>

    <h2>He<span class='layoutContainer'>ad</span>ing 2</h2>
</body>
</html>

Inside CSS, using [dir], we selecting all elements having dir attribute no matter if the attribute has has any value or if it is stand-alone.

Here and inside your code, [dir] .layoutContainer selecting all elements of class layoutContainer which are children of all those elements which contains dir attribute.

gpl
  • 1,380
  • 2
  • 8
  • 24