html - CSS border doesn't work -


html:

<body>     <div><p>something</p></div>     <div class = "mypanel">         <div class = "heading">my header</div>         <div class = "body">my body</div>     </div>     <div><p>something</p></div> </body> 

css:

.mypanel: {     border: 1px solid #687d6d;     border-radius: 5px 5px 0 0;     box-shadow: 10px 10px 1px black;     margin: 3%; } .mypanel .heading {     background: #b6f0c4;     border-radius: 5px 5px 0 0;     color: #687d6d;     padding: 10px 20px; } .mypanel .body {     padding: 10px 20px; } 

jsfiddle

what i'm curious that, if set border on .mypanel, doesn't work on .mypanel .body, there's no border around .mypanel .body, why?

here problem:

.mypanel: { 

just remove : (colon)

snippet below:

.mypanel {    border: 1px solid #687d6d;    border-radius: 5px 5px 0 0;    box-shadow: 10px 10px 1px black;    margin: 3%;  }  .mypanel .heading {    background: #b6f0c4;    border-radius: 5px 5px 0 0;    color: #687d6d;    padding: 10px 20px;  }  .mypanel .body {    padding: 10px 20px;  }
<div>    <p>something</p>  </div>  <div class="mypanel">    <div class="heading">my header</div>    <div class="body">my body</div>  </div>  <div>    <p>something</p>  </div>


Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -