Specify element not to receive properties from other main elements

Asked

Viewed 25 times

1

I have a menu and I just wanted to specify an element so it does not receive the same properties applied in the others, in case the element would be #Lk "PRODUCTS" it is receiving all attributes that have been applied in other elements, but I don’t intend to apply any kind of attribute to it, as I do to ignore the attributes inserted in it??

body{background-color:#6C9;}
*{ padding:0px; margin:;}
input{ display:none;
}
.menu{ width:100%; 
height:52px; 
background-color: #333; 
font-family:Arial, Helvetica, sans-serif;
}
.menu ul{ list-style:none; 
position:relative; 
top:2px; 
}
.menu ul li{ width:150px; 
float:left;
}
.menu label, .menu a{ padding:15px; 
display:block; 
text-decoration:none; 
text-align:center; 
background-color:#FFF; 
color: #06F; 
user-select:none; 
transition:all 0.3s linear;
}
.menu ul ul{ position:absolute; 
top:50px; 
visibility:;
}
.menu ul li:hover ul{ visibility:visible;
}
.menu label:hover, .menu a:hover{ background-color:#CCC;
}
.menu ul ul li{ float:none;
}
.menu ul ul li label, .menu ul ul li a{ border-bottom:1px solid #000; 
background-color: #F93; 
}
hr#hr1{ position:absolute; 
left:149px; 
top:-3px; 
height:35px;
}

/*sub*/
.sub{ position:fixed; 
width:100%; 
height:100%; 
left:0px; 
right:0px; 
background-color:#3CF; 
display:;
}
#ln1:hover .sub{ display:block;}
<nav class="menu">
<input type="checkbox" class="rd" id="t1"/>
<input type="checkbox" class="rd" id="t2"/>
<ul>
  <li id="ln"><label for="t1">News<hr id="hr1"></label></li>
  <li id="ln1"><label for="t1">Serviços</label>
   
   <ul>
     <div class="sub">
      <li><a href="#" id="lk">PRODUTOS-01</a></li>
      <li><a href="#" id="lk">PRODUTOS-02</a></li>
     </div>
   </ul>
  </li>
  
  <li id="ln"><label for="t2">Informações</label>
   <ul>
     <li><a href="javascript:void(0)">Links</a></li>
     <li><a href="#">Links</a></li>
   </ul>
  </li>
</ul>

</nav>

html css

2 answers

1


First never use Ids with the same name. Each ID is unique and can only be applied to ONE element.

But if you just want to make a variation on the ID name you can make the selection of the attribute using a ^ to select only the attribute that starts with the same type name: [id^="lk"] that means any ID that starts with Lk for example id="lk1" and id="lk2". So you can with the attr get both Ids at once.

Note that with this css I cleaned all styles that are applied in the Ids within the .menu down

.menu [id^="lk"] {
    all: unset !important;
}

See the example applied in your code

body{background-color:#6C9;}
*{ padding:0px; margin:;}
input{ display:none;
}
.menu{ width:100%; 
height:52px; 
background-color: #333; 
font-family:Arial, Helvetica, sans-serif;
}
.menu ul{ list-style:none; 
position:relative; 
top:2px; 
}
.menu ul li{ width:150px; 
float:left;
}
.menu label, .menu a{ padding:15px; 
display:block; 
text-decoration:none; 
text-align:center; 
background-color:#FFF; 
color: #06F; 
user-select:none; 
transition:all 0.3s linear;
}
.menu ul ul{ position:absolute; 
top:50px; 
visibility:;
}
.menu ul li:hover ul{ visibility:visible;
}
.menu label:hover, .menu a:hover{ background-color:#CCC;
}
.menu ul ul li{ float:none;
}
.menu ul ul li label, .menu ul ul li a{ border-bottom:1px solid #000; 
background-color: #F93; 
}


.menu [id^="lk"] {
all: unset;
}

hr#hr1{ position:absolute; 
left:149px; 
top:-3px; 
height:35px;
}

/*sub*/
.sub{ position:fixed; 
width:100%; 
height:100%; 
left:0px; 
right:0px; 
background-color:#3CF; 
display:;
}
#ln1:hover .sub{ display:block;}
<nav class="menu">
    <input type="checkbox" class="rd" id="t1"/>
    <input type="checkbox" class="rd" id="t2"/>
    <ul>
        <li id="ln"><label for="t1">News<hr id="hr1"></label></li>
        <li id="ln1"><label for="t1">Serviços</label>
        
        <ul>
            <div class="sub">
            <li><a href="#" id="lk1">PRODUTOS-01</a></li>
            <li><a href="#" id="lk2">PRODUTOS-02</a></li>
            </div>
        </ul>
        </li>
        
        <li id="ln"><label for="t2">Informações</label>
        <ul>
            <li><a href="javascript:void(0)">Links</a></li>
            <li><a href="#">Links</a></li>
        </ul>
        </li>
    </ul>
    
</nav>

  • Hugo! I couldn’t clear the line’s Hover effect: . menu label:Hover, . menu a:Hover{ background-color:#CCC;} I did so, . menu a:Hover [id ="Lk"] { all:unset; }

  • @Elienayjunior this is because of the class priority hierarchy, I edited the answer and put an Important, thus all: unset !important; and now cleaned 100%. The rest of the style you want to put has to come after unset ok, like all: unset !important; color black; for example

  • I just figured out another way! . menu #lk1, . menu #lk2 { all:unset; }

  • @Elienayjunior yes so tb believe it works, but using the [id ="Lk"] you do not need to keep repeating lines of css. However the magic is even on account of the all:unset

0

There are two ways:

1) use the selector :not to apply to anything the selector picks up, but something.
For example, in the element you don’t want to put a ID different, lkProdutos for example, then on the selectors that affect this link, use the not, thus: 

.menu ul ul li a:not(#lkProdutos){  .... }

2) use a CSS Reset in the element, i.e., "clean" the styles, bringing the element to its original style. There is an interesting text about this here: http://blog.thiagobelem.net/css-reset-o-que-e-e-como-usar

Basically, make a selector for the element and remove unwanted styles:

#lkProdutos {
  /* reset dos estilos */
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.