Results 1 to 6 of 6

Thread: class order override... what is it?

  1. #1
    Join Date
    Jul 2010

    class order override... what is it?

    If I add many classes, as I often do: how is the override order determined?

    For example
    HTML Code:
    <!doctype example.dtd>
    .foo {
    .bar {
    <body class="foo bar">
    Am I over-complicating this?... and the font-size is really determined by the order in which the rules were written (external top to bottom, internal top to bottom, inline left to right). Sorry I couldn't be bothered to read the w3c documentation, it was something like 1000 pages.

    I also realize that the rules for CSS3 selectors are fuzzy. So I'm just looking for a general answer that will cover CSS1&2, even though I like the nth selectors those are cache.
    Last edited by eval(BadCode); 02-14-2011 at 05:09 AM.

  2. #2
    Join Date
    Jul 2003
    The City of Roses
    General answer: The specificity depends on the number of IDs, the number of class names, and the number of elements in the selector. And if two declarations have the same specificity, then the one that comes later wins.

    In your case, .foo and .bar have equal specificity, so it comes down their order. If you changed .foo to body.foo, then it would have greater specificity, and it would then win.

  3. #3
    Join Date
    Jul 2010
    So which is more specific?

    html body .foo
    html body .foo

    -- and --

    body div .foo .bar
    body div .bar .foo
    body .bar

    for this html:

    HTML Code:
    <!doctype example.dtd>
    <body class="foo bar">

    Also I thought ID's trump everything else (except !important). Is that wrong?

    Also: !important (which I use sparingly) sometimes fails, even if there is no conflict with another !important rule.
    What's more important than !important? Should I put it twice? !important !important or is it !!IMPORTANT!!
    Last edited by eval(BadCode); 02-14-2011 at 06:05 AM.

  4. #4
    Join Date
    Dec 2003
    Bucharest, ROMANIA
    My advice:
    1. Don't use !important. That supposed to be a hack for IE6 to bypass many of its bugs (bad override rules included). You don't need it.
    2. Don't set the same property in 2 classes, as long as you intend to use them as multiple classes for the same element. It makes no sense. Thus your problem (with foo and bar setting the same font-size property different values) makes no sense from the beginning.
    3. The general override order is from (first -> last) specific to comprehensive, from local to general, from deep to surface.
    4. The local style overrides all, followed by the #id selector.
    Last edited by Kor; 02-14-2011 at 09:38 AM.

  5. #5
    Join Date
    Jul 2010
    Thank you Kor. That makes more sense, if nothing is overwritten then there is no question about what will show up

    I'm going to take a shot in the dark, but are these the general types of classes (a model?) that I could follow?

    HTML Code:
    <!-- an example of 960gs being used for layout and boxmodel css classes -->
    <div class="container_24 clearfix">
       <h3>Are these the general types of CSS classes someone could expect?</h3>
       <div class="grid_10 prefix_1 suffix_1">
         <div class="grid_4 prefix_1 alpha">
            <h4 class="title centered emphasis">Text</h4>
            Text would be font-size, color, font-family, position, indentation etc.
         <div class="grid_4 suffix_1 omega">
             <h4 class="title centered emphasis">Background</h4>
            Background would be bg-color, bg-image, and opacity.
       <div class="grid_10 prefix_1 suffix_1">
         <div class="grid_4 prefix_1 alpha">
           <h4 class="title centered emphasis">Box-Model</h4>
           Box-Model would be margin,padding,width,height        
         <div class="grid_4 suffix_1 omega">
           <h4 class="title centered emphasis">Layout</h4>
           position, visibility, zindex, clear, overflow, display etc
    Or is there another model?
    I heard some lady talking about OOP CSS, but I don't really know... She wasn't very convincing.
    Last edited by eval(BadCode); 02-14-2011 at 12:39 PM.

  6. #6
    Join Date
    Dec 2003
    Bucharest, ROMANIA
    There are no "general types of CSS classes someone could expect". But there is an OOA (Object Oriented Analysis) and an OOP aplicable in CSS. In fact it is a derivation from the DOM OOA and OOP.

    When you create an HTML DOM structure, you follow a logical tree structure. But that structure is not unique (you may have a header, a container and a footer, but it is not absolutely required - or your container might be divided in 1,2 3 column structure, or in 1,2 3... row structure, or combination of...). Subsequently, the CSS, as the responsible for the presentation, will follow the DOM structural content. Therefor, we might talk rather about general principles of organizing the CSS, but not about general types of classes.

    Let me show you a very basic example. You decide that you will use at least two font sizes in your document: 12px for the most of the text, and 16px for some isolated elements, like some titles or headlines... things like that. It is obvious you will start with setting your all elements the font-size 12, and creating a class for the font-size 16. You may also create a separate class for the font weight bold.
    font-family:Arial, Helvetica, sans-serif;
    <div class="fsize16 bold">TITLE: Lorem Ipsum</div>
    <div class="fsize16">Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    Content: Integer neque lectus, sagittis et euismod quis, sollicitudin sit amet ante. Ut id turpis lacus, sit amet sagittis tellus. Etiam sit amet nibh neque.
    But you may create,as well, a single class called .title, and a single class .headline, if you are not using those font sizes and weight in other parts of the document... It is up to your DOM structure following the process of OOA. There are many ways to skin a cat.

    Of course, you must consider the fact that some CSS properties can or can not be applied over some elements. For instance, an inline element (a SPAN) has no margins, but a block-level element has. From this point of view you may expect or not some properties over some elements, but this has another meaning. Moreover, we might talk about related CSS properties (font properties, box properties, display properties...), but this is rather a separation by nature, not by "expected CSS classes"
    Last edited by Kor; 02-15-2011 at 04:15 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13930 seconds
  • Memory Usage 2,909KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (3)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates