CODEWITHSUNDEEP
css
zey
zey

Reputation: 6103

using same css class from multiple pages

Let say I have three pages ( Page1,Page2,Page3 ) and each page has this same element

<div class="myStyle" >.....</div>

in css

.myStyle{...some style...}
.myStyle > a {...}
.myStyle > a:hover {...}

I want to add media query @media all and (min-width: 800px) {... just for Page1 and want to modify .myStyle in it.
I don't want to apply this to page2 and page3 .
I can create new class like .myStyleForPage1 but is there any better way ??

Upvotes: 2

Views: 1078

Answers (3)

Moose
Moose

Reputation: 333

You could add an ID to the page 1 class. So it could be:

    .mystyle#page1 {} / <div class="mystyle" id="page1"></div>

since an ID is supposed to be a single instance, where as a class is supposed to be used more than once, using an id is neater.

EDIT: here is a link that explains it pretty well. https://css-tricks.com/the-difference-between-id-and-class/

Upvotes: 2

Sir Bucket Head
Sir Bucket Head

Reputation: 70

Putting a second class as NoobTW suggests is your best bet.

Although as an alternative (if you aren't able to easily add an extra class) you could put the CSS you want to apply to Page1 into a style tag within Page1 or include another stylesheet in Page1 that has the page specific styles.

Upvotes: 1

NoobTW
NoobTW

Reputation: 2564

You can create a .myStyleForPage1 class for your @media all and (min-width: 800px) {...

But also you can create another class like myStyleMQ, and

page1: <div class="myStyle myStyleMQ">...</div>

page2: <div class="myStyle">...</div>

page3: <div class="myStyle">...</div>

Because you can have more than 1 class in an element.

Upvotes: 4

Related Questions