Problem with inheritance in css

Asked

Viewed 44 times

0

Guys I’m having a problem with my comic, well I want to change my comic so that all the elements stay the same. But I tried to do this with the following HTML:

<div class="button_profile">                                   
 <form method="POST" enctype="multipart/form-data" action="/account/upload">                                                  
  <label class="label"><input type="file" name="file">Alterar foto de perfil</label>                                          
  <button type="button">Chat</button>                           
  <a href="mailto:[email protected]?subject=subject">Email</a>                                                   
 </form>                                                      
</div>

And the following css comic:

.button_profile button,label, a{
 width:100%;
 font-family:Arial,Helvetica,sans-serif;
 color:#fff;
 border:2px solid #fff;
 background:#151515;
 text-decoration:none;
 text-transform:uppercase;
 letter-spacing:2px;
 padding:5px;
 margin-top:20px;
 margin-bottom:20px;
}

The problem is that it’s modifying the elements that are outside the div and I don’t want that, but when I create a class it solves and I don’t want to create an unnecessary class, can someone tell me where I’m going wrong?? Logically what I’m doing is modifying all button label and a who are children of the div button_profile.

html5 css3

  • No, the way you wrote only the button needs to be descended from .button_profile.

2 answers

1


By adding a comma to the list of tags you are listing which are the targets for that style, in your case: .button_profile button,label, a you are setting a style for all button who are children of .button_profile, all the label and a from the page regardless of who are children. You need for each element to define who is the parent:

.button_profile button,
.button_profile label,
.button_profile a{
   ...
}

Or you can use technologies like Sass to avoid repeating code, it would be something like:

.button_profile{
   button, label, a{
      ...
   }
}

Which will be compiled into a CSS like the example done before, but you don’t have to worry about writing the repetition.

  • Okay, but why doesn’t my comic work when I put them to modify the elements that are button_profile children? The problem is that they’re modifying even the elements that aren’t the children of the div, and why is this happening to my comic upstairs? I don’t quite understand why.

  • Because with my code he modifies all the elements I mentioned, but he does not only modify the label Buttons and the div, he also modifies those that are outside, IE ... Full-page :(

  • Your comic worked, I just didn’t understand why my no :( What I wanted was to modify the elements of the div button_profile and modified only that those who are not from the div button_profile was also modified :(.

  • As I explained, when you use the comma, you are separating which elements are to be modified, i.e. .button_profile button tells the CSS to modify the button who is the son of .button_profile, but when adding a comma CSS will recognize the next element as a new one, it ignores the previous one, so when writing simply label for him you mean all the labels page.

  • Aaa understood, question beast more I have to remove the doubt, because when I remove the comma it does not work ? It doesn’t change anything when I remove the comma, and when I use the + it doesn’t work either, so I tried to explain better button_profile button label a and then the comic ... Anyway it didn’t work that way, so I tried button_profile button + label + a then remaining of the codice, and why in these ways did it not work? Because when I removed the comma I did not separate the elements! And when I used + was to try to concatenate, I want to understand so I can understand well kkk sorry if it is uncomfortable.

  • Here a link referring to the CSS selectors, will help you better understand how they work.

Show 1 more comment

0

You are directly altering the elements label, a without declaring their relatives, try:

.button_profile button, .button_profile label, .button_profile a{
  width:100%;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
  border:2px solid #fff;
  background:#151515;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  padding:5px;
  margin-top:20px;
  margin-bottom:20px;
}

Browser other questions tagged html5 css3

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