Do you use the css rules correctly and prevent the css rule from applying changes to other tags?

Concatenate rules with commas, is equivalent to having completely new rules for each condition of those separated by commas.

So, the rule: .showing h1, h2, h3 {} is equivalent to:

.showing h1 {}
h2 {}
h3 {}

Since you want to apply the rule when the class showing is parent of tags h1 , h2 or h3 , you need to repeat the condition:

'.showing h1, .showing h2, .showing h3 {}

And there's no way to group that disjunction to save you writing% co_of% many times.

In the case of:

.estilo > h1 > h2

Here you do not group rules. Here you have only one condition, (a .showing , child of a h2 , child of a class tag h1 ), while the "comma" is not an operator to define conditions (like .estilo ), but rather, groups conditions completely independent of each other.

Off-topic (request in comment): Other "operators" to define conditions, the most common, are >p and # , which are used to filter by the attribute . and id :

<div id="pepe"> <!-- div 1 -->
  <div class="inner"> <!-- div 2 -->
  </div>
</div>

<div id="jose"> <!-- div 3 -->
   <div class="inner"> <!-- div 4 -->
   </div>
   <div> <!-- div 5 -->
   </div> 
   <table class="inner"> <!-- div 6 -->
   </table>
</div>

For this snippet HTML, the following rules select the following class s:

#pepe {} /* div 1 */
.inner {} /* divs 2, 4 y 6 */
#jose > .inner {} /* divs 4 y 6 */
#jose > div /* divs 4 y 5 */
#jose > div.inner /* div 6 */

As an additional restriction, there CAN NOT be two HTML elements with the same ID attribute (actually, you can, but you should not), but as many elements with the same class as you want.

Working with CSS has to be a simple and well-defined task. There are many good practices, but there is one that is almost paramount in long styles: OOCSS (object oriented css).

Your problem can be solved just by doing the following:

.showing h1,
.showing h2,
.showing h3 {
  ...
}

However, I think that by having certain good practices you can have a more efficient stylesheet.

OOCSS

Object oriented CSS is a technique popularized a few years ago, which basically consists of the principle separation of interests , which tells us that each module in an application must have a well-defined interest / concern and be limited to it.

This paradigm allows us to write modular CSS code and be able to integrate modules easily without creating redundancy. Let's see an example:

.box {
  height: 40px;
  width: 40px;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.gold {
  background-color: gold;
}
.small {
  height: 20px;
  width: 20px;
}
.large {
  height: 80px;
  width: 80px;
}
.rounded {
  border-radius: 4px;
}

<div class="box green small"></div>
<div class="box gold"></div>
<div class="box red large"></div>
<div class="box blue rounded"></div>

As you can see we can compose a box as if it were a lego: we can give it a size, a color, rounded, without creating any dependencies and redundancy.

Applying OOCSS to your code, it would look like this:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #222222;
  font-size: 13px;
  font-family: 'OpenSans', Roboto, Lato;
  background-color: #fff;
}

#showing {
  height: 150px;
  width: 100%;
  padding-left: 40px;
  padding-top: 20px;
}

/*Regla optimizada*/

.header {
  padding-bottom: 10px;
  font-family: "raleway";
  font-weight: 300;
}
.header.xl {
  font-size: 30px;
}
.header.medium {
  font-size: 20px;
}
.medium-bold {
  font-weight: 500;
}

/*Esta es una regla de prueba*/
#prueba {
  height: 150px;
  width: 100%;
  background-color: #ccc;
  padding-left: 40px;
  padding-top: 20px;
}

<div id="showing">
  <div class="container">
    <div class="showing">
      <h1 class="header xl medium-bold">Contenido de prueba</h1>
      <h2 class="header xl medium-bold">Segundo contenido de prueba</h2>
      <h3 class="header medium medium-bold">Último contenido de prueba</h3>
    </div>
  </div>
</div>
<!-- Aquí surge el problema -->
<div id="prueba">
  <div class="container">
    <div class="sinestilo">
      <h1 class="medium-bold">Contenido de prueba</h1>
      <h2 class="medium-bold">Segundo contenido de prueba</h2>
      <h3 class="medium-bold">Último contenido de prueba</h3>
    </div>
  </div>
</div>

The HTML document must specify which rules to use and not the other way round. Making your styles modular allows you to reuse code and eliminate redundancy.

From what I understand, you want to change the style of the headers within .showing, is not it? Well, if so, you can access those elements like this:

.showing h1, .showing h2, .showing h3 {
      ...;
}