473,385 Members | 1,673 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Classes with the same name?

Is there anything wrong with having several classes with the same name
in the same style sheet? Something like...

div.pagedown {
margin: 20px 0px 20px 0px;
border-top: 1px solid #caa;
border-left: 1px solid #caa;
width: 450px;
}

img.pagedown {
margin: 0px 8px 0px 8px;
border-width: 0;
}

a.pagedown {
color: #903;
}

thx,

--williamc
Jul 20 '05 #1
12 9324
williamc wrote:
Is there anything wrong with having several classes with the same name
in the same style sheet? div.pagedown {
img.pagedown {
a.pagedown {


You can't have multiple classes with the same name. You _can_ have multiple
styles with selectors that match the same class (which is what you have
above).

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #2
Thx. I stand corrected. And as a matter of style, since these are all
used together, it makes sense to me to have them all called "pagedown".
Just wondered what other people do...

--williamc
David Dorward wrote:

williamc wrote:
Is there anything wrong with having several classes with the same name
in the same style sheet?

div.pagedown {
img.pagedown {
a.pagedown {


You can't have multiple classes with the same name. You _can_ have multiple
styles with selectors that match the same class (which is what you have
above).

--
David Dorward http://dorward.me.uk/

Jul 20 '05 #3
On Sat, 20 Sep 2003 15:05:44 +0100, David Dorward wrote:
williamc wrote:
Is there anything wrong with having several classes with the same name
in the same style sheet?

div.pagedown {
img.pagedown {
a.pagedown {


You can't have multiple classes with the same name. You _can_ have multiple
styles with selectors that match the same class (which is what you have
above).


Hmm.. I thought that classes and selectors were the same thing. A class
such as:

..classname {};

is a selector on the root element, is it not?

Further, I thought you could break up a class/selector into multiple
definitions, such as:

img.classname {position:absolute};
img.somethingelse {...);
img.classname {background-color:000};
Jul 20 '05 #4
Erik Funkenbusch wrote:

Hmm.. I thought that classes and selectors were the same thing.
No. A class is an attribute of html which may be used to build a
selector.
A class such as:

.classname {};
(the semicolon is illegal, afaik)
is a selector on the root element, is it not?
No. It is a selector for *any* element whose class is .classname, and
would thus work on any of the following:

<img class="classname" src="foo.png">
<div class="classname">
<body class="classname">
<!-- etc. -->

By contrast,

img.classname {}

is a selector only for image elements whose class is .classname.
Further, I thought you could break up a class/selector into multiple
definitions, such as:

img.classname {position:absolute};
img.somethingelse {...);
img.classname {background-color:000};


These are 2 different selectors; the first and third specify img
element with class .classname, the second is img with class
..somethingelse.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5
Brian wrote:
Erik Funkenbusch wrote:
.classname {};
is a selector on the root element, is it not?
No. It is a selector for *any* element whose class is .classname


In contrast, a selector that matches the root element, at least in
HTML/XHTML would be:

html {}

(although the { and } are not actually part of the selector AFAIK)
--
David Dorward http://dorward.me.uk/
Jul 20 '05 #6
Erik Funkenbusch wrote:
I don't follow. if img.myclass isn't a class, what is? Is it a
theoretical construct? Is it the identity assigned to a selector?
"myclass" is a class.

..myclass is a selector that matches elements with the class "myclass"

img.myclass is a selector that matches img elements with the class "myclass"
So how are img.classname and td.classname not the same class then?
Becuase they aren't classes at all. In both cases though, ".classname"
matches the same class.
So if those are the same class then the following would mean that the td
position style would supercede the img classname, right?

img.classname {position:absolute;}
td.classname {position:static;}


No, becuase the selector has more rules in it then just the class name.

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #7
Erik Funkenbusch wrote:
On Sat, 20 Sep 2003 16:15:21 GMT, Brian wrote:
Erik Funkenbusch wrote:

Hmm.. I thought that classes and selectors were the same thing.
No. A class is an attribute of html which may be used to build a
selector.


I don't follow. if img.myclass isn't a class, what is?


img.myclass is a selector that selects elements of type 'img' that are of
class 'myclass'. Selectors are part of CSS. All a selector is is an easy
way of talking about some elements. You do not have to use classes to
select elements in CSS.

A class is a way of grouping a set of elements. Classes are part of HTML.
You do not have to use CSS to make use of classes.
[snip]
A class such as:

.classname {}; [snip] is a selector on the root element, is it not?


No. It is a selector for *any* element whose class is .classname, and
would thus work on any of the following:
More specifically, it's shorthand for:

*.classname { ... }
[snip] So how are img.classname and td.classname not the same class then?
They aren't classes at all, they are selectors. <img> elements and <td>
elements that have the same class attribute *are* in the same class. That
does not mean that you have to select one when you select the other. The
two selectors img.classname and td.classname are two examples that select
some elements in a class but not others.

Further, I thought you could break up a class/selector into multiple
definitions, such as:

img.classname {position:absolute};
img.somethingelse {...);
img.classname {background-color:000};


These are 2 different selectors; the first and third specify img
element with class .classname, the second is img with class
.somethingelse.

[snip] So if those are the same class then the following would mean that the td
position style would supercede the img classname, right?

img.classname {position:absolute;}
td.classname {position:static;}


No.

img.classname {position:absolute;}

....takes all the <img> elements that are in the 'classname' class, and set
the 'position' property to 'absolute'.

td.classname {position:static;}

....take all the <td> ekements that are in the 'classname' class, and set the
'position' property to 'static'.

The two rulesets are talking about completely different elements, so there
won't be any conflict.
If this is still confusing, I suggest you throw away classes for the time
being and concentrate on using CSS by selecting elements in other ways.
--
Jim Dabell

Jul 20 '05 #8
On Sat, 20 Sep 2003 19:11:59 +0100, Jim Dabell wrote:
If this is still confusing, I suggest you throw away classes for the time
being and concentrate on using CSS by selecting elements in other ways.


I understand how it works, I just didn't understand the semantics.

You've cleared up a few things for me here by pointing out the relationship
between HTML and CSS and these terms. Thanks.
Jul 20 '05 #9
Erik Funkenbusch wrote:
On Sat, 20 Sep 2003 19:11:59 +0100, Jim Dabell wrote:
If this is still confusing, I suggest you throw away classes for the time
being and concentrate on using CSS by selecting elements in other ways.


I understand how it works, I just didn't understand the semantics.

You've cleared up a few things for me here by pointing out the relationship
between HTML and CSS and these terms. Thanks.


Erik,

You mentioned C programming - did you do any object oriented programming?

If so, I think this may be the source of some of your confusion - a lot
of programmers expect classes in HTML/CSS to be similar to the use of
the term classes in other programming languages and that can cause a lot
of confusion - as they are really very different beasts.

If this is at all your case just ignore anything you have ever heard
about classes from OOP languages when dealing with CSS classes and it
will save you a lot of headaches.

HTH.

--Nikolaos

Jul 20 '05 #10
On Mon, 22 Sep 2003 23:24:13 -0400, Nikolaos Giannopoulos wrote:
Erik Funkenbusch wrote:
On Sat, 20 Sep 2003 19:11:59 +0100, Jim Dabell wrote:
If this is still confusing, I suggest you throw away classes for the time
being and concentrate on using CSS by selecting elements in other ways.
I understand how it works, I just didn't understand the semantics.

You've cleared up a few things for me here by pointing out the relationship
between HTML and CSS and these terms. Thanks.


Erik,

You mentioned C programming - did you do any object oriented programming?

If so, I think this may be the source of some of your confusion - a lot
of programmers expect classes in HTML/CSS to be similar to the use of
the term classes in other programming languages and that can cause a lot
of confusion - as they are really very different beasts.


Yes, I'd already come to that conclusion :)
If this is at all your case just ignore anything you have ever heard
about classes from OOP languages when dealing with CSS classes and it
will save you a lot of headaches.


Actually, it's not as different as you might think. It just takes a little
bending of your understanding to see it :)
Jul 20 '05 #11
Erik Funkenbusch wrote:
On Mon, 22 Sep 2003 23:24:13 -0400, Nikolaos Giannopoulos wrote:

[snip]
If this is at all your case just ignore anything you have ever heard
about classes from OOP languages when dealing with CSS classes and it
will save you a lot of headaches.


Actually, it's not as different as you might think. It just takes a
little bending of your understanding to see it :)


It is all very well to say what CSS classes are not. The hard bit as far as I
am concerned is to replace that with what they are. (I have the misfortune to
understand a fair amount about OOA & OOD as well as OOP. Aaaaaaarrrggghh!)

My current mental model is to forget about classes as anything resembling
anything else with the same name. They might as well be called "trogs". (So
far, so good). But I worry that I have got things fundamentally wrong, and
need a "paradigm shift". I've summarised my mental model below - I hope that
no-one will tell me that I need a "paradigm shift".

I now think of it instead from the point of view of a rendering engine working
serially (?) through a document such as an HTML document. What does it do at
each stage?

Initially, within the <head> </head> block, it (conceptually at least) builds
up a composite style sheet, according to the cascading rules of linked CSSs &
any styles declared there. Then it starts on the <body> </body> block, and at
each new element (tag), it has to decide "how do I render this element?"

Some elements themselves have styles, and these are, in effect, combined with
the composite style sheet for the duration of the element. (But I'll ignore
this, because I don't use them!)

Then the task of the rendering agent (or user agent) is to determine, for this
next element, what set of values from the composite style-sheet to apply for
each of the relevant properties. And the first question is "what rules are
SELECTED?" I see it as primarily about SELECTION. My assumption is that if you
can understand which rules are selected, and then understand the inheritance
and priority principles that apply where there are contradictions and
incompleteness within the selected rules, you end up with an understanding of
what the rendering agent will do.

Perhaps the biggest challenge for me is that this model prevent me from
knowing what the effect of a particular rule is in isolation. It isn't like
being able to discuss what the class of an object specifies. Even later
declarations within the same rule may overide what has just been learned.
Later rules may also do so. And then, at "browse time", all that may be
blown-away by new declarations that only become apparent when the rendering
agent reads the document!

I worry about this model because of its lack of predictability. But what is
really important is: "is this mental model useful?"

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #12
On Tue, 23 Sep 2003 18:14:29 +0100, Barry Pearson wrote:
Erik Funkenbusch wrote:
On Mon, 22 Sep 2003 23:24:13 -0400, Nikolaos Giannopoulos wrote:

[snip]
If this is at all your case just ignore anything you have ever heard
about classes from OOP languages when dealing with CSS classes and it
will save you a lot of headaches.


Actually, it's not as different as you might think. It just takes a
little bending of your understanding to see it :)


It is all very well to say what CSS classes are not. The hard bit as far as I
am concerned is to replace that with what they are. (I have the misfortune to
understand a fair amount about OOA & OOD as well as OOP. Aaaaaaarrrggghh!)


The way I now look at it is this, and of course this may be wrong as well:

"classes" are "types". When one says that a particular element, say <p>
has a class="content" then you are saying that this <p> is a "content". It
might also be class="content left tuesday 2001" in which case it also "is
a" all those other types as well, much like multiple inheritance.

This is fairly straight forward, and these rules are also straight forward,
though I must admit to not knowing which "class" takes precedence (earlier
or later in the list) when there is a conflict.

One can look at ID's as object names that also infer a type (class). For
style purposes they are the same as classes, other than only allowing a
single instance of that type (DHTML offers other ways to use ID's, but
we'll not get into that here).

Now, it's all well and good to say that a <p> is-a "content", but how are
types defined? HTML doesn't care, it just assigns them the type and allows
the browser to figure out it's definition and apply it.

CSS is the mechanism in which the browser looks up type (class)
definitions. It's something like IDL or other meta-languages in which you
define the objects in a different language/format than it is interpreted.

In fact, it might be best to think of a browser as not an HTML renderer,
but a CSS renderer, that uses HTML as its transport format. It's not
difficult to imagine using CSS with other kinds of languages, such as SGML,
XML, or even non-SGML based languages like TeX or RTF.

Since "cascade" could be another word for "inherit", one could think of CSS
"selectors" as "class overloading".
Jul 20 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Hal Vaughan | last post by:
I'm not sure what the correct name for this would be. I'd think it's either an indirect reference, or a pointer, or something like that. I'm working on a program that would call a series of...
9
by: Zunbeltz Izaola | last post by:
Hi to all! I wonder if it possible (i'm sure python can do :-) ) to define classes on runtime. My problem (schematically) is the folowwin. The User can choise betwenn 3 property of an object....
12
by: David MacQuigg | last post by:
I have what looks like a bug trying to generate new style classes with a factory function. class Animal(object): pass class Mammal(Animal): pass def newAnimal(bases=(Animal,), dict={}):...
4
by: Axel Straschil | last post by:
Hello! I was fooling around with creating classes for a module with eval, something like: MyModule.py: class Base: init(self, name): self._name = name
1
by: Bob Rock | last post by:
Hello, in the last few days I've made my first few attempts at creating mixed C++ managed-unmanaged assemblies and looking aftwerwards with ILDASM at what is visible in those assemblies from a...
2
by: farseer | last post by:
Hi, First, sorry for this long post, but i'd like to explain my problem in detail... i have generated some classes from my schema. Classes are generated for the root (overall document),...
5
by: Anthony Evans | last post by:
Greetings I'm using VC++.NET to create a class library. The class library contains managed classes that wrap legacy unmanaged classes by the same name. I use regasm to register the DLL for...
2
by: Chris Smedley | last post by:
I am attempt to perform something that I thought should be quite simple... I want to take the VoiceXML 2.0 or VoiceXML 2.1 XSD definitions and create classes. It appears that a number of items...
2
by: miked | last post by:
I am architecting in a read only class for use in mapping data to a business object. The object makes strong use of nested classes and their ability to access protected fields. The downside is...
5
by: =?Utf-8?B?UmljaA==?= | last post by:
Greetings, I am actually a VB.Net guy, but I have worked somewhat with C++ and C#. I just want to ask about the relationship between Abstract Classes and Interfaces. My first question is if...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.