CODEWITHSUNDEEP
csshtml
MSmS
MSmS

Reputation: 189

Two divs same CSS?

Is it possible to make two divs with the same css, something like:

.Navig1, .Navig11 a {
  display: block;
  height: 15px;
  width: 70px;
  background-color: {color: Navig Bg 1};
  text-align: center;
  font-size: 8px;
  line-height: 15px;
  color: #FFF;
}

Because I don't want my style code to be too long, and I need these two to look the same, but be different when hovered, and I thought this would do, but this code doesn't work. Where am I making the mistake?

Upvotes: 0

Views: 7150

Answers (4)

samael
samael

Reputation: 2168

It'll be easier to work out what you are aiming to achieve if you also provide the html. There is no need to have two CSS class's. You can use a single CSS class for the styling multiple elements on a page.

If you have multiple div containers with two set with a class called mynav:

<div class="mynav"></div>
<div></div>
<div class="mynav"></div>

Then one CSS class will effect both.

div.mynav a {
    display: block;
    height: 15px;
    width: 70px;
    text-align: center;
    font-size: 8px;
    line-height: 15px;
    color: #fff;
}

div.mynav a:hover {
    /* new css */
}

If you wish to have a variations then you simply need to create the rule for how the element will change depending on the action you are doing.

Also consider using more than one class for a single element if needs be. Your div could be:

<div class="mynav someotherclass"></div>

You may find that for what you are doing that some simple Javascript is the best solution.

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

Yes it is possible:

.Navig1 a, .Navig11 a {
  display:block;
  height:15px;
  width:70px;
  background-color:#000;
  text-align:center;
  font-size:8px;
  line-height:15px;
  color:#FFF;
}

.Navig1 a:hover {
  /*css property*/
}

.Navig11 a:hover {
  /*other css property*/
}

Upvotes: 4

csalvato
csalvato

Reputation: 568

You can do what you want by:

.Navig1, .Navig11 a {
    /* Common Styles */
}

.Navig1:hover {
    /* Navig1 Specific Styles on Hover */
}

.Navig11 a:hover {
    /* Navig1 a Specific Styles on Hover */
}

But, as the other answerers mentioned, you have broken CSS. What should be going on with the background color?

Upvotes: 0

Marc B
Marc B

Reputation: 360672

css isn't "programmable". there's no variables or methods to say "use style included in section X here".

but, you can fix it by removing the bgcolor definition from this block and creating a new one

.Navig1, .Navig11 a {
    ... as before ...
}

.Navig1, .Navig11 {
    background-color: #xxx;
}

Upvotes: 0

Related Questions