I want to apply css to these elements
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
display: inline;
}
But, if you only belong to a class x, how could you do this?
Enter the element along with the class you want it to belong to.
Example:
li.teste {
color: blue;
}
a.teste {
color: red;
}<li class="teste">Teste</li>
<li>Teste</li>
<br>
<a class="teste">Teste</a>
<br>
<a>Teste</a>If I have misunderstood your question, tell me that I change my answer.
Yes it is possible in two ways.
In case you want to put elements inside a parent div, for example, there's a div that will have .classex and everything inside it can be customized with your css
.classex ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
.classex li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.classex li a:hover {
background-color: #555;
color: white;
}
.classex li {
display: inline;
}<div class="classex">
<ul>
<li><a href="#">classe x</a></li>
</ul>
</div> The other way is to put .classex in the element itself, thus
ul.classex {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li.classex a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li.classex a:hover {
background-color: #555;
color: white;
}
li.classex {
display: inline;
}<ul class="classex">
<li class="classex"><a href="#">classe x</a></li>
</ul>