CSS selector declarations

Question

This is such a simple issue but I can't seem to find an exact answer anywhere...

Simply, can I declare attributes on a selector in two different places without overwriting the first attribute declaration?

For example, say I declare an attribute to an element within a CSS file loaded into a page:

.x {margin:2px;}

I then want to declare another attribute within the page dynamically:

.x {padding:2px;}

while keeping the CSS file attributes.

While I appreciate that there are plenty of other ways of doing this, is it correct to do it this way ?

awm · Accepted Answer · 2011-03-04 13:16:59Z

1

This is fine. You can put declarations is as many different places as you like.

answered Mar 4, 2011 at 13:16

awm

6,58027 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

awm Over a year ago

Cheers~ 'Course it's usually better to keep related declarations together, but in this case it appears that there are some that you want dynamically generate and some that you want to be fixed. (Am I right?)

Bob Over a year ago

You are most certainly right. As I only wanted to change one particular attribute I didn't want to print the whole lot out every time. Figured I could use multiple classes, add the style directly, etc, etc, but I just got hung up on this solution !

FarligOpptreden · Accepted Answer · 2011-03-04 13:17:17Z

0

You can, yes. First off, the styles declared in the CSS file included on the page will be applied, then any other styles specified ad-hoc on the page will be applied on top of that.

answered Mar 4, 2011 at 13:17

FarligOpptreden

5,04324 silver badges23 bronze badges

Comments

Seth · Accepted Answer · 2011-03-04 13:17:57Z

0

That will work. Since CSS cascades it will inherit the styles as they go and add them to that class. That's why some sites change as the page loads.

answered Mar 4, 2011 at 13:17

Seth

6,2353 gold badges30 silver badges44 bronze badges

Comments

bradenkeith · Accepted Answer · 2011-03-04 13:18:59Z

0

First, to declare a paragraph tag, you wouldn't put a period before it. It should be:

p {padding:2px;}

Secondly, CSS is a cascading style sheet, therefore you can open an element declaration however many times you want. The style properties within it will take the last stated object. IE:

p {padding:2px; border:1px solid #000;}

and then later

p {padding:5px;}

Padding is now 5 px but it retains it's 1px border.

answered Mar 4, 2011 at 13:18

bradenkeith

2,4131 gold badge19 silver badges26 bronze badges

Comments

Milan Jaric · Accepted Answer · 2011-03-04 13:22:07Z

0

THAT IS BAD PRACTICE!!! I would sugest you to create "switch" class which will change some css attributes, rather than dinamicaly inject it later on the page. So later use it by adding it to element or remove

<style>
  .p { margin:2px; }
  .addition { padding: 2px; }
</style>

<p class="p">.....</p>

to switch to new style either with jquery on some ajax call or what ever you need.

<p class="p addition">....</p>

to switch off padding just remove "addition" class or "p" class if you want to switch off maring.

answered Mar 4, 2011 at 13:22

Milan Jaric

5,6662 gold badges29 silver badges36 bronze badges

3 Comments

bradenkeith Over a year ago

It's not terrible practice. Consider the situation where in one sheet you want to declare properties, and in another you want to declare design related properties (backgrounds, colors, etc).

Bob Over a year ago

Not exactly the same though. Padding is set in both instances so in your example, I'd have to create .addition1 and .addition2 - each with different padding. Surely more efficient to dynamically switch within the in-page styles ?

Milan Jaric Over a year ago

I is not terrible but is bad practice. It is not bad to create for instance styles_colors.css ans styles_dim.css it can be quite handy, but I would rather stick to one file :)

Daniel K · Accepted Answer · 2011-03-04 13:23:01Z

0

Cascading Style Sheets will inherit the styles and what you are doing is totally fine from a specification point of view but might not be considered best practice. Also be aware of, that if you start overriding other styles the css hierarchy may apply: External > Internal > Inline.

for more information see http://nzwhost.com/article/understanding-css-hierarchy

answered Mar 4, 2011 at 13:23

Daniel K

7,1012 gold badges29 silver badges35 bronze badges

Comments

Jan Daniel · Accepted Answer · 2011-03-04 13:34:40Z

0

I think the best way to do it is separate CSS declarations by logic.. layout together, colors together and specific medias (like screen, print) together.

answered Mar 4, 2011 at 13:34

Jan Daniel

1315 bronze badges

Comments

techspeque · Accepted Answer · 2011-08-11 14:45:54Z

If you want to make it to do it dynamically you can do something like that:

NOTE: This is a PHP example.

<?php $back = 'image.jpg'; 
**something else can be executed ie conditionals and 
more variables can be added**)
?>

<html>
<head>
<style type="text/css">
btn{
margin:0;
padding:0;
background-image: <?php $back; ?>
height:100px;
width:200px;
display:block;
}
</style>
</head>
<body>
 <div>
     <div class="btn">Test text</div>
</div>
</body>
</html>

You can add the predeclared variables or sets of the variables into CSS code using PHP. Note that CSS needs to be included in the HTML/PHP file you are working on. Lets say you want to randomly generate the background colour. PHP array (of ie '#CCC') > select values from the array randomly > add the variable into the CSS code. #

In your case you can specify two classes and then select one according to the condition in your dynamic code

Collectives™ on Stack Overflow

CSS selector declarations

8 Answers 8

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related