CODEWITHSUNDEEP
htmlcss
o_s_a_k_a
o_s_a_k_a

Reputation: 71

How to apply the style to custom data attribute?

As an exmple I have this code with an data-append attribute that should be executed for the tablets and desktops. How shoud I apply the style for this peace of html-code: in the main (parent html stylesheet) with implementing ID for containers or in the child html or try to style it inline ?

body {
	background: #fff;
	font-family: 'Verdana', sans;
  font-size:16px;
	color: #fff;
	text-align: left;
}

.skip{
	clip: rect(0 0 0 0);
	margin: -1px;	
	overflow:hidden;
	display: none;
	position: absolute; 
  top: -1px; 
  left: -1px;
	z-index: -1;
}
<body>
  <h1 class='skip'>Exploration of css rules of the hidden submenu</h1>
    <nav nav ul>
      <h2 class='skip'>Menu with one submenu</h2>
         <ul>
           <!--A as a custom data attribute for screens with width more than 767px-->
           <li id='customData' data-append='/a-plus.html' data-media='(min-width:768px)'>
            <a href='/a'>A</a></li>
           <li><a href='/b'>B</a><li>    <!--B-->
           <li><a href='/c'>C</a></li>   <!--C-->
          </ul>
     </nav>
</body>

Upvotes: 1

Views: 2459

Answers (1)

hungerstar
hungerstar

Reputation: 21685

Hopefully I understood you correctly.

If you want to style an element that has the attribute data-append, simply use and attribute selector to target it in your CSS.

Below I'm using [data-append] as my selector, which means any element that has the attribute data-append will get the styling. If you wanted to limit it to li then use li[data-append] {}.

body {
  background: #fff;
  font-family: 'Verdana', sans;
  font-size: 16px;
  color: #fff;
  text-align: left;
}

.skip {
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  display: none;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: -1;
}

[data-append] {
  background-color: indianred;
}
<h1 class='skip'>Exploration of css rules of the hidden submenu</h1>

<nav>

  <h2 class='skip'>Menu with one submenu</h2>

  <ul>
    <!--A as a custom data attribute for screens with width more than 767px-->
    <li id='customData' data-append='/a-plus.html' data-media='(min-width:768px)'>
      <a href='/a'>A</a>
    </li>
    <li>
      <a href='/b'>B</a>
    </li>
    <li>
      <a href='/c'>C</a>
    </li>
  </ul>

</nav>

Upvotes: 2

Related Questions