CODEWITHSUNDEEP
javascripthtmlcssangularjs
Grzegorz
Grzegorz

Reputation: 3335

Changing font size of a particular div that is built in run-time

Consider this:

<div>
   <div class="h">header</div>
   <div class="m">menu</div>
   <div class="m">menu</div>
</div>

The h and m classes are built by a tool that I am not permitted to modify. I would like to change the 'h' font size in this and only this place. All other places that use the 'h' class must keep the same font size.

I was thinking about adding my own class like this:

<div class='myheader'>
   <div class="h">header</div>
   <div class="m">menu</div>
   <div class="m">menu</div>
</div>

and define this in my .css file like this:

.myheader > * {
}

.myheader.h {
   font-size:20px;
}

Unfortunately it does not work for it does not 'see' .myheader.h. It applies only style read from .h and .myheader but not both at the same time.

Is there any other way to change the header font size? Before you say "modify <div class='h'>header</div>" like I need to reiterate - these likes are being created by a tool - in run-time - so I cannot modify them.

PS. I am using angularJS, but I am not allowed to use jQuery calls.

Thank you in advance! - Greg,

See http://plnkr.co/edit/R0elLsOdcOfsLpHB1NT1 for an example. I am able to change font size, and that's cool, but when I add change of a color, it spreads down, and I don't want it. I want in this example to change Level 3, and that's it.

Upvotes: 0

Views: 415

Answers (1)

repzero
repzero

Reputation: 8412

looking at this .myheader.h is inccorrect, what you need is .myheader .h

.myheader .h {
  font-size: 20px;
  color: red;
}
<div class='myheader'>
  <div class="h">header</div>
  <div class="m">menu</div>
  <div class="m">menu</div>
</div>

Next css children elements will inherit certain attributes, of their parents

The div .level4 is inside level3 so it will inherit from its parent (.level3) unless you override this behaviour.

You have the text content Level 3 in .level4 and afterwards a single div with class level4.You can simply override the inherited rule but making the children elements retain their "default" using color:initial

.level3 > * {
  color:initial;
}

Snippet below

/* Put your css in here */

.level1 {
  font-size: 10px;
}

.level2 {
  font-size: 20px;
}

.level3 {
  font-size: 30px;
}

.level4 {
  font-size: 40px;
}

.changer .level3 {
  font-size: 100px;
  color: red;
}

.level3 {
  border: solid green;
}

.level3>* {
  color: initial;
}
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class='level1, changer'>
    Level 1
    <div class='level2'>
      Level 2
      <div class='level3'>
        Level 3
        <div class='level4'>
          Level 4
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions