How to apply an opacity without affecting a child element with html/css?

As far as I know you can't do it in a simple way. There a couple of options here:

1. Use absolute positioning to position box "inside" the container.

   #container {
       opacity: 0.3;
       background-color: #777788;
       position: absolute;
       top: 100px;
       left: 100px;
       height: 150px;
       width: 300px;
   }
   #box {
       opacity: 1;
       background-color: #ffffff;
       position: absolute;
       top: 110px;
       left: 110px;
       height: 130px;
       width: 270px;
   }

   <div id="container"></div>
   <div id="box">
       <p>Something in here</p>
   </div>

2. Use Javascript - almost the same as above, but position and size don't have to be hardcoded.

You can use opacity in combination with background color, like this:

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​Live demo