Checking if data attribute is set at parent div css / less and using it for the child divs as well

Question

I have div tag for which a data-type attribute is associated. I want to apply different styles depending on data-type is set or no.

<div data-type="type1">Hello, World!</div>

Can I check if this attribute data-type is set or no in css/less ? This question is solved with this.

---

But, if I apply this data-type attribute only to the parent div, can I use this attribute for all the child div tags as well. For instance,

<div data-type=`type1`>
  <div id="newDiv"> </div>
</div>

In my CSS, I want to apply different styles for #newDiv depending on whatever type (data-type) is set to its parent. I don't want to specify the data-type attribute to the child div as well. How do we do this in CSS ?

Answer 1

If you find a pattern in your data-type value, yes, you can:

/* 1. Attribute value starts with "type" */
div[data-type^="type"] {
    /* Styles */
}

/* 2. Attribute value contains "type" */
div[data-type*="type"] {
    /* Styles */
}

1. Works for: type1, typex, typeaskdasd, etc...
2. Works for: abctypexyz, typexyz, etc...

Answer 2

You can use :not([data-type]) to select any element that does not have the attribute data-type set regardless of the values used.

Basic working example:

div:not([data-type]) {
  color: red;
}

<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>

---

Alternatively, you can do the opposite and use [data-type] to select anything with the data-type attribute set regardless of the value

Working example:

div[data-type] {
  color: red;
}

<div data-type="type1">Hello, World!</div>

<div>Hello, World!</div>

---

If you want to target a child div whose parent div has the data-type attribute set the you can use something like this:

div[data-type]>h1 {
  color: red;
}

<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>

This also can be reveresed based on your selector preference to target the child elements of parent elements which do not have the data-type attribute set.

div:not([data-type])>h1 {
  color: red;
}

<div data-type="type1">Hello, World!
  <h1> How are you?!</h1>
</div>

<hr>

<div>Hello, World!
  <h1> How are you?!</h1>
</div>

---

If you have more complex structures you can make use of the wildcard * selector to build selectors that match very broad patterns. The letters represent the depth of the tree on which the element resides with aaa being a direct child and bbb being a grandchild...etc

Basic Example:

[data-type] * h1,
[data-type] h1 {
  color: red;
}

<div data-type="type1">
  <h1> aaa</h1>
</div>

<hr>

<div>
  <h1> aaa</h1>
</div>

<hr>

<div id="test" data-type="type1">
  <div>
    <h1> bbb</h1>
    <div>
      <h1> ccc</h1>
    </div>
  </div>
  <h1 class="wow"> aaa</h1>
  <div>
    <h1 class="wow"> bbb</h1>
  </div>
</div>

<hr>

<div id="test">
  <h1 class="wow"> aaa</h1>
  <div>
    <div>
      <h1> ddd</h1>
    </div>
    <h1 class="wow"> ccc</h1>
  </div>
</div>