Change property of a CSS element on certain pages

Asked

Viewed 914 times

1

For my example I will use a CSS class called . item

.item{
    width:100%;
}

So, how to change this property of this element on some specific pages?

for example, in the index page qro width 100%, in the contact page qro 90%, in the location want 20%.

how to do this without having to create one for each?

css
  • 1

    I think you need to create a class for each page, for index Voce creates .item-index{ width:100%; }, for contact .item-contato{ width:90%; } and for localization .item-localização{ width:20%; }

3 answers

2


You just put a class on body of the page you want to be different, example you put to class="diferente",there in the CSS would look like this:

.item{
    width:100%;
}

.diferente .item{
    width:20%;
}

  • Good, I’ll do it Kenny... Vlw Fella

0

You can also ignore your current class by using ! Important on your page.

.item{
    width:100% !important;
}

  • Vlw fera, but look who Kenny suggested, I think it’s better...

0

You can do it in some ways :

Add a stylesheet for each page. Eg :index.css/contact.css/localization.css and call each in the head correspondent.

Or you can do it with javascript...

  • Vlw fera, but look who Kenny suggested, I think it’s better... :)

  • @Renanduarte It was not Kenny who suggested it was Roberta, It is one of the ways I prefer to organize the style this way I said, because in my view it becomes simpler, to mess with media queries and tals, but each one has a purpose use the solution you think best and that works... Vlw man]

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.