dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
537
share rss forum feed

jfmezei
Premium
join:2007-01-03
Pointe-Claire, QC
kudos:23

Naming of CSS blocks

I've never been able to find a good explanation for this.

in a CSS,

I can have

p { bla bla } and this affects all paragraphs.

i can have

p.mypara { blo blo } and this will affect < class="mypara"> and will have both bla bla and blo blo qualities;

it appears I can have:

#mydefinition { x y z } which will apply x y z to whatever tag has the "id=mydefinition"

It appears I can also have

#mydefinition div { a b c } which, I assume applies a b and c only of "mydefinition" happens to be a "div". (is that correct ?)

I have also seen some CSS names defined with @

What are those for ?

There are also some defined as .mycss { d e f }
I assume that this allows one to apply mcss to any object with the "class=mycss". is that correct ?

Does anyone have a URL where all those types of CSS block names are well defined ?


adsldude
Premium,Ex-Mod 2003-9
join:2000-11-10
Colorado
kudos:1
Answer: Classes vs IDs

Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.

»www.tizag.com/cssT/cssid.php

»www.w3schools.com/css/css_id_class.asp

»css-tricks.com/the-difference-be···d-class/
--
Front Range Mountain Bike Patrol - »www.frmbp.org
Go4it2day Web Services - »www.go4it2day.com


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

1 recommendation

reply to jfmezei
said by jfmezei:

It appears I can also have

#mydefinition div { a b c } which, I assume applies a b and c only of "mydefinition" happens to be a "div". (is that correct ?)

You were correct up to this point. The styles of "a b c" will only apply to divs that are a child of an element that has an id of "mydefinition". If you want to apply a style to only divs with that ID, would would need to use "div#mydefinition".

I have also seen some CSS names defined with @

What are those for ?

They are called at-rules. The most common ones you'll likely see are @media, @font-face although there are other ones for character sets, paging, and importing additional stylesheets. @media can specify rules for certain situations, such as printing the page vs displaying it on a screen. There are also media queries so that you can control page styles depending on certain attributes of the media. This comes in handy for adjusting a page's style one way for a widescreen laptop browser window or a narrow iphone screen without having separate sites for mobile or non-mobile browsers.

There are also some defined as .mycss { d e f }
I assume that this allows one to apply mcss to any object with the "class=mycss". is that correct ?

Yes. Any element that has that class will have the styles of d, e, and f applied, regardless if it's a div, span, p, etc.

Does anyone have a URL where all those types of CSS block names are well defined ?

There are already a few links above, but what you are specifically looking for are selectors. There are only 4 main types of selectors: inline styles, elements, classes, and ids. Inline styles are when you specify a style="some: style; another:style;" inline of the html. Elements are just the element name (e.g. body, div, span, p). Classes are always preceded with a period (.maincontent, .headline, etc). IDs always are preceded with a # (e.g. #header, #footer, #nav-link-1, etc).

You can chain them together to be more specific. So like you had above, div#mydefinition, or div.mycss. You can combine all three to div.mycss#mydefinition that would only match divs that have a class of mycss and a id of mydefinition. If they only matched one or two of the three, that particular styling rule would not apply.

You can specify a series of tags to match a particular heirarcy. For example, you can have "div div span.headline img#somephoto that would only match an image tag with an id of somephoto that's inside a span with a class of headline that's nested in two divs.

CSS rules are applied from least specific to most specific, with elements < classes < ids < inline styles. A more technically correct explanation is that a point value is assigned to each selector. Inline styles are worth 1000 points, ids are worth 100, classes 10, and elements 1.

So given the following three rows,

div{background-color:red;}
div.someclass{background-color:blue;}
div#someid{background-color:green;}

what would be the background color of the following html?

<div id="someid" class="someclass">blah blah blah</div>

If you guessed green, you would be correct, since it has a specificity of 101 as compared to 11 or 1 for the other two. If the html was

<div id="someid" class="someclass" style="background-color:purple;">blah blah blah</div>

then it would be purple since inline specificity was 1000. Had the div#someid been 10 elements#ids all together, then it's specificity would have been greater then the inline style.

There are a few general guidelines that apply most of the time to simplify it:
1. If selectors have the same level of specificity, the last rule will override previous.
2. If selectors have different levels of specificity, the more specific override previous.
3. Rules with more specific selectors have a higher specificity. e.g. div.class
4. Rules with more specific selectors have a greater specificity.
5. The last rule at a given specificity overrides any previous, conflicting rules.
6. ID selectors have a higher specificity than attribute selectors.
7. You should always try to use IDs to increase the specificity.

jfmezei
Premium
join:2007-01-03
Pointe-Claire, QC
kudos:23
Many thanks. You helped solved one of my long time mysteries. In fact, your use of the word "selectors" let me find the explanation on the w3 site as well:

»www.w3.org/TR/CSS2/selector.html

and I now know the importance of the coma when defining like blocks as opposed to child

aka:

#myid, div {a b c} is not the same as #myid div {a b c}