css inheritance

beginner question

[Befuddled53]

I'm rusty on the programming side so not sure if all the terminology is correct.
I am trying to get a series of page stubs to inherit the same set of css class
Let's call the page stubs: stub1, stub2, stub3 etc
The class with the commands is myclass (background color, font color etc.)
So I call the page with:

#slug1 .myclass

Nothing happens.
If this makes sense, could somebody point me in the right direction with the correct syntax.
Thank you.

[not2easy]

Hi Befuddled53 and welcome to WebmasterWorld [webmasterworld.com]

Your #slug1 would need to be identified as id slug1 via its container (<div id="slug1"> or <p id="slug1"> ) and your css for those would use syntax such as:

#slug1 { display:block; background-color: #ffe; }

for example.

Remember that each #id should only be used once per page. To have the appearance match an existing class you could use

#stub1:myclass { css content } 

where "css content" would incude any color, spacing, padding, etc. changes you might want.

I realize this might not take care of everything, but it is based on the loose description shown. I am not sure where these #slug1 labels come from, so this might not answer your question.

[Befuddled53]

Thank you. I was trying to keep my problem description simple but I probably oversimplified. The slug is a URL page slug, so for:

https://www.webmasterworld.com/css/5092445

the slug is 5092445. Previously, each page slug called up separate CSS commands with its own identical ID, thus:

slug1 needs css ID #slug1
slug2 needs css ID #slug2
slug3 needs css ID #slug3

and so on. This worked fine. But what I want is for each page slug to call the same CSS. I tried your example using

#stub1:myclass { css content }

but still nothing. I hope this makes a little more sense. It's so hard to explain!

[Befuddled53]

To expand a little, the test class I'm using is this:

.myclass {
background:#4d0000;
}

That's just to test whether the CSS is being used, and it isn't.

[not2easy]

Sorry, "{ css content }" was an example, it does nothing.

If the various slug IDs all use the same css and if they must be called by slug ID then I am not sure how you can assign css to an unknown ID. It would be simple to assign css to the containing element no matter what it contains. In other words, can the various page slugs be inserted into <div class="myclass"> containers?

I believe I'm missing part of the scenario here. Not your fault at all.

[Befuddled53]

Thank you for trying. It probably is me not understanding first principles. Can I go back to square one and explain what I'm trying to do.
My site can currently display any of 50 similar pages, each with its own set of CSS IDs. Every time I create a new page, I use a new set of CSS commands. What I would like to do is have just five CSS IDs, not fifty. Each page will then use whichever of the five its directed to use.
The pages are identified by their URL slug.
That, in a nutshell, is the problem!

[Befuddled53]

Current code:

.myclass {background-color:#fff000}
#slug1 : .myclass

[lucy24]

Every time I create a new page, I use a new set of CSS commands.

If each page has its own CSS, wouldn't it be more straightforward to leave the variable parts on the page itself? Save external stylesheets for things that are shared by multiple pages.

Quick note on syntax:

foo.bar with no space means a foo element (p, div, whatever) of class “bar”
foo .bar with space before the . means anything of class "bar" located inside a foo element
In both caes, replacing the . with a # means “bar” is the id instead of a classname.

: or :: (no space on either side) is for “pseudo-class”. There's a fixed number of these, like “first-line” or “nth-child”; you can’t make up your own.

[not2easy]

I am having trouble figuring out where/how this css is used. Is there a stylesheet for the page where the slugs are displayed that contains your .myclass css or is it used inline? A stylesheet for the page might use something like

<link rel="stylesheet" href="https://example.com/style.css" media="screen" type="text/css"> 

while inline styling might insert a line in the element only, as in:

<div style="background-color:#fff000;"> 

I'm trying to figure out where the id="slug1" is found.

Whether it is in your page's stylesheet or inline, is #slug1:myclass defined?

[Befuddled53]

Thank you for both replies. I think some terminology confusion stems from the use here of an old FROG CMS and PHP which was set up 16 years ago (not by me) and which I'm trying to unravel.

If each page has its own CSS, wouldn't it be more straightforward to leave the variable parts on the page itself? Save external stylesheets for things that are shared by multiple pages.

The CSS blocks are all in the same file to make editing, copying and pasting easier because there are similarities. But like I said, I'm trying to reduce them to just five, to be used as needed by any of the fifty pages.
At this point in the reply, I'm trying to access your replies to quote, but the system won't let me see them. I'll do it from memory.
The CSS is stored in a separate file along with other modules. They are not inline. I use inline occasionally but try to avoid them if possible.
Lucy24 - the syntax explanations were useful, thank you. Told you I was rusty.
I can't think of other ways to explain the issue without complicating it further. If necessary, I'll carry on creating CSS style blocks/sheets for each page, even though there will only be five distinct ones, repeated for each page slug, but I feel sure there's a neater way of doing it. I suspect that the page URL slugs are referenced in the 'Layout' tab of my FROG CMS via PHP. If I try to explain that, I will be even more out of my depth.
The two code lines in the previous post are key to this - whether or not they can be tweeked to work.

[not2easy]

That does help, though I have never worked with the FROG CMS, it does explain why it is not as straightforward as I had thought.

[Befuddled53]

If anyone is still there, could I keep this going a little longer? I really would like to solve this. I've located the <div> where the page is formatted. It has an attached ID, simply:

<div id="bd">

which is fine. That was the original developer's code and it works fine. I want to extend that formatting with a class of formatting commands:

<div id="bd" class ="myclass">

Should this work? At the moment, it doesn't seem to be picking up the class at all. I've simplifed the class to just a background-color for testing, and even that doesn't register. Am I missing something? Thank you.

[not2easy]

If multiple slugs are being inserted into a page you can only use one #bd element because id is specific to a single page element that might contain other elements.

If this is not working:

<div id="bd" class ="myclass">

try

<div id="bd" class="myclass">

If there are conflicting descriptions with the id and class, the id will override class. If your id and class both specify different font-color for example, the id font-color will be used. I have never used a class within an id element and I don't think that is the correct syntax as used above, using them separately.

If I'm not mistaken (which I probably am, and lucy24 will be in to correct ) something like:

<div id="bd: .myclass">

would be preferable, but I have no notes on using a class within an id element.

[Befuddled53]

Thank you for replying. I thought your first example was identical to my code, but I now see the space between 'class' and '='. So easy to miss these things. Still no luck with either. I don't think there's any conflict between the id and class format commands, they complement each other. I've even tried putting the class into a <div> of its own but it's ignored. I'll press on.

[not2easy]

It would help to view the css for #bd id to see whether it is conflicting with the .myclass definitions. You don't mention what browser you are using, but most of them offer dev tools to view the rendered pages' source and it can help a lot in such situations.

[lucy24]

The id is simply a string; nothing inside it is parsed as css. In fact
:: quick detour to validator ::
Kinda thought so. An id isn't allowed to contain whitespace. (Not like class, where spaces let you assign multiple classes to the same element.) Punctuation is fine. That includes the hyphen, which allows you to do things like

div[id|=foobar] {background-color: #669;}

meaning “If the element has an id, and the part before the hyphen--or the whole thing if there is no hyphen--is "foobar", then these styles apply.” In this example I used id, but it can be used with class as well. This syntax was especially meant for languages, so for example en-gb, en-us, en-au and so on could all share a style, but it's useful in other contexts. I use it most often in books with multiple illustrators, so each person's pictures (id in the form “rackham-1" "rackham-23" and so on) can be formatted differently. Thus:

div[id|=rackham] p.caption {font-style: italic; color: #600;}
div[id|=hoppner] p.caption {font-family: BlackLetter; color: #600;}
div[id|=heath] p.caption {font-variant: small-caps;}
div[id|=hoppner] img {padding: 40px; background-color: #F7EEE6; border: 1px solid #EDC;}

I've gone into detail because you may be able to adapt it to your own situtation, such as giving all your pages an id in the form "green-1" "green-2" "red-3" and so on.

[Befuddled53]

This is great, thank you so much, and yes, I can adapt it. I AM progressing, but it's line by line using the web style inspector to pinpoint the bad code. Could I ask this without starting a new thread? In a class, what's the syntax for defining a header? Are either of these correct? They don't seem to be:

.myclass { 
h3 {font-family:calibri;color:#8A4117;font-size:13pt;etc}
.h4 {font-family:calibri;color:#8A4117;font-size:9pt;etc} 
}

[lucy24]

The syntax you want is

.myclass h3 {styles here}
.myclass h4 {styles here}

Spaces in css mean “something inside of something else”, in this case an h3 element inside of anything with classname "myclass". Nested braces are mainly used in @-rules, which you may not have got to yet :)

Oh, and please don't set an explicit point size; it's hard on readers with vision issues. Instead, use percentages. 150% means one and a half times the regular body text size; 75% means three-quarters the size, and so on.

Edit: And no, I have no idea why my fingers think it is spelled “situtation”. Oh well.

[Befuddled53]

Thank you again for helping out. Much appreciated. I think I've cracked it but there's so much in the original code that's incomprehensible. As I said, it was written 16 years ago by a professional coder and I'm still figuring it out and changing things. Bit of a nightmare as I'm not cut out for this kind of disciplined thinking!

[edited by: not2easy at 2:28 am (utc) on Sep 4, 2023]
[edit reason] Sorry, no specifics please. (See ToS) [/edit]