-1

CSS:

#logo-container {
  position: fixed;
  right:5px;
  .home-page {
    /* homepage style */
  }
  .content-page {   /* <-- I want to change the $element's class to this class */
    margin-top: 78px;
  }
}

JQuery (to change #logo-container's class to .content-page):

jQuery(this).prev('#logo-container').attr('class', '#nav-container .content-page');

This doesn't seem to be working...Any ideas?

EDIT: The issue seems to be in how I reference .content-page. I've tried the following and none seem to work:

'content-page' '.content-page' 'logo-container content-page' '#logo-container .content-page' '#logo-container.content-page'

Bob Smith
  • 17
  • 4

6 Answers6

1

This is the code you are looking for:

div.a {
  color: red;
}

div.a div.b {
  /* Inherits color from div.a */
  font-weight: bold;
}

You should check this question: nested css rules

francisco
  • 27
  • 6
0

Try

$(this).find('div').removeClass('logo-container').addClass('content-page');
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
0

You can use addClass to add a new class to a DOM element:

$('#logo-container').addClass('content-page')

If you want to remove an old class and add a new one, use toggleClass

$('#logo-container').toggleClass('old-class content-page')

dcro
  • 13,294
  • 4
  • 66
  • 75
  • It's not an issue of adding or toggling a class, but how do I reference a 'nested' class?? – Bob Smith Aug 29 '13 at 07:15
  • You just reference it by class name (e.g. `content-page`). But you need to adjust your CSS as the one currently provided is invalid. The correct CSS definition in your CSS file is most likely `#logo-container.content-page`. See http://stackoverflow.com/questions/3720844/nested-css-rules to learn more about the correct way of defining that CSS – dcro Aug 29 '13 at 07:26
  • Thanks!! It's too bad CSS doesn't allow nesting this way so that a child css id/class could inherit styles from it's parent. (Similar to the way classes in Java/C++ inherit attributes/functions from it's parent class.) – Bob Smith Aug 29 '13 at 07:41
0

try

jQuery(this).prev('#logo-container').toggleClass('content-page');
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
0
# //this is a sign for an id

to remove an id you have to use removeAttr('id')

so maybe you need something like this

$('#logo-container').addClass('content-page').removeAttr('id');
caramba
  • 21,963
  • 19
  • 86
  • 127
  • your words: "JQuery (to change #logo-container's class to .content-page):" so what is the #logo-container's class? and also your words: "jQuery(this).prev('#logo-container').attr('class', '#nav-container .content-page');" so you are trying to do something with the id. a class will never listen to # - in your CSS is a "}" to much – caramba Aug 29 '13 at 07:21
  • if you google for "jquery change class of element" you will find tons of information. for me your question is not so clear to see exactly what your problem is – caramba Aug 29 '13 at 07:25
  • Nvm. thanks for the help, but I found out CSS can't do want I wanted it to do. Here is my question better stated: http://stackoverflow.com/questions/4060405/is-it-possible-to-reference-one-css-class-within-another – Bob Smith Aug 29 '13 at 07:34
-1
$(this).prev('#logo-container').addClass('content-page')

BTW,whats for "#nav-container"?

coffeexu
  • 1
  • 1