Specify element to not receive properties of other main elements

Question

Specify element to not receive properties of other main elements

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a menu and I wanted to just specify an element so it does not receive the same properties applied to the others, in case the element would be #lk "PRODUCTS" it is getting all attributes that have been applied to other elements, but I intend do not apply any type of attribute in it, how do I ignore the attributes entered 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

asked by anonymous 06.06.2018 / 19:43

2 answers

0

There are two ways:

1) use the :not selector to apply to everything the selector picks up, less anything. For example, in the element you do not want to put a ID different, lkProdutos for example, then in the selectors that affect that link, use not , like this:

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

2) Use a CSS Reset element, ie "clean" the styles, bringing the element to its original style. There is some interesting text about it here: link

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

#lkProdutos {
  /* reset dos estilos */
}

06.06.2018 / 19:53

Adding platform to the Xamarin project already created ORDER BY or LIMIT. What is first processed in SQL Select?

score 1 · Accepted Answer

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 attribute selection using a ^ to select only the attribute that starts with the same name type: [id^="lk"] that means any ID that starts with lk for example id="lk1" and id="lk2" . So you can with attr get the two IDs at once.

Notice that with this css I've cleaned up all the styles that are applied to the IDs inside .menu down

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

See the example applied to 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>