CODEWITHSUNDEEP
css
Rafa
Rafa

Reputation: 2027

CSS - Is it possible to assign the same specification of a class to an id

I am working with an application which auto-generates some HTML pages and I need to write some CSS files these pages. I want to reuse several classes (generated by jquery-ui theme), but I can not change any HTML element.

So, is it possible to assign the same specification of a class to an id?

If this is possible, then I would easily create a mapping between my classes and ids.

Example:

<html>
<head><style>
#charlieID {
    /* I want #charlie to be identical to .alphaClass */
    /* Assume that I can not change the HTML (it will be auto generated by another application)*/
}

.alphaClass {
    font-size: small; 
    color: lime;
}

.betaClass {
    font-size: medium;
    color: blue;
}
</style></head>
<body>
    <p class="alphaClass">Alpha</p>
    <p class="betaClass">Beta</p>
    <p id="charlieID" class="charlieClass">Charlie</p>
<body></html>

I will have hundreds (maybe thousand) IDs to manage in the whole application not necessarily in one single page. So, I have total freedom when it comes to CSS, therefore I can break it down in several CSS files (one file for each page) to control IDs and another Main CSS with my classes.

Upvotes: 0

Views: 139

Answers (4)

slebetman
slebetman

Reputation: 113896

Yes, certainly. A css spec may have more than one target. To target the same rules to both the class and id simply do this:

#charlieID, .alphaClass {
    font-size: small; 
    color: lime;
}

Note the comma that separates targets.

Additional answer:

If you have hundreds of thousands of ids to match then this standard method (no need additional script or libraries, just regular CSS) is actually smaller than any possible alternative. Consider:

/* Standard CSS */
#charlieID1, #charlieID2, #charlieID3, #charlieID4, #charlieID5,
#charlieID6, #charlieID7, #charlieID8, #charlieID9, #charlieID10,
#charlieID11, #charlieID12, #charlieID13, #charlieID14, #charlieID15,
#charlieID16, #charlieID17, #charlieID18, #charlieID19, .alphaClass {
    font-size: small; 
    color: lime;
}

and compare it to:

/* LESS CSS. Needs to be compiled with LESS */
.alphaClass {
    font-size: small; 
    color: lime;
}

#charlieID1 {
    .alphaClass
}
#charlieID2 {
    .alphaClass
}
#charlieID3 {
    .alphaClass
}
#charlieID4 {
    .alphaClass
}
#charlieID5 {
    .alphaClass
}
#charlieID6 {
    .alphaClass
}
#charlieID7 {
    .alphaClass
}
#charlieID8 {
    .alphaClass
}
#charlieID9 {
    .alphaClass
}
#charlieID10 {
    .alphaClass
}
#charlieID11 {
    .alphaClass
}
#charlieID12 {
    .alphaClass
}
#charlieID13 {
    .alphaClass
}
#charlieID14 {
    .alphaClass
}
#charlieID15 {
    .alphaClass
}
#charlieID16 {
    .alphaClass
}
#charlieID17 {
    .alphaClass
}
#charlieID18 {
    .alphaClass
}
#charlieID19 {
    .alphaClass
}

And that's just 19 ids.

There is a better work around however. If you really do have hundred of thousands of possible ids then targeting the ids is likely the wrong thing to do. Instead you should really look at the structure of the document and see if the thing you want to target can be targeted in other ways.

One alternative is to write a target based on the thing's parent. For example if you have a structure like this:

<div class='foo'>
    <span id='charlieID'></span>
</div>

Then you can target it like this instead:

div.foo span, .alphaClass {
    font-size: small; 
    color: lime;
}

Be creative in finding common structures that you can target. There are other tricks like using child selectors or sibling selectors that you can use. I strongly suggest reading at least one advanced CSS tutorial. But be aware that some older browsers don't support some of the more useful rules. Still, since you mention CSS3 you're probably targeting newer browsers anyway.

If all else fails, there's nothing that says that you can't generate the CSS file instead of typing it by hand:

#! /usr/bin/env tclsh

# Sample script to print rule with thousands of target.
# (note: I have no idea what thousands of targets do to various browsers)

set targets {}
foreach {name idx} {"#charlie" 1000 ".alphaClass" "" "#jane" 500} {
    if {$idx == ""} {
        lappend targets $name
    } else {
        for {set i 0} {$i < $idx} {incr i} {
            lappend targets "$name$i"
        }
    }
}
puts [join $targets ","]
puts "{font-size:small; color:lime;}"

# should print a rule with the following targets:
# #charlie0..#charlie999, .alphaClass and #jane0..#jane499

Upvotes: 2

Brandon Buck
Brandon Buck

Reputation: 7181

To your question: no, you cannot inherit styles. If you use multiple selectors like @slebetman suggests then you can achieve the affect but that requires you to modify the (likely minified) jquery ui css file which may be a hassle.

If you are capable of install ruby (or have ruby available) then you can install sass which is a "high level CSS" (to sum it all, it's much more on the nitty gritty).

This can be done with gem install sass and then just compile your file with sass filename.scss:filename.css and viola.

Finally, the benefit of doing this will allow you to inhert those styles easily, let's assume you have a two files, cannotedit.css and mycss.scss. First things first, rename your cannotedit.css to _cannotedit.scss (which does not require any additional changes as all CSS is valid SCSS). The added underscore prevents it from being compiled seperately which gives you the benefit of this all being in a single CSS file in the end.

_cannotedit.scss

.center {
  margin: 0 auto;
}

And you want to apply those styles to an ID but reuse them (pardon the overly simplistic example):

mycss.scss

@import "cannotedit";

#someId {
  @extend .center;
  color: red;
}

And bam, your compiled file will have the contents of both _cannotedit.scss and mycss.scss and the extended ID will 'inherit' styles from the style. This may (or may not) be overkill for your project but I wanted to add it to your list of options.

Final Note

If ruby is unavailable to you there are other options such as LESS or Stylus, I know Stylus runs on Node.js and I'm not sure what LESS runs on (probably Node.js as well, can't remember) that will perform roughly the same action I just recommend Sass because of it's ease and I prefer it (thanks mostly to the compass add on).

Resources

  1. Sass
  2. LESS
  3. Stylus

Upvotes: 2

lc.
lc.

Reputation: 116478

AFAIK there is no way to "inherit" an existing class's style in plain CSS.

If client-side scripting is acceptable, you can dynamically add the classes. jQuery example:

$(document).ready(function() {$('#charlieID').addClass('alphaClass');});

Note that if you do have the ability to change the existing CSS then I have misinterpreted your question. In that case you don't have to explicitly rewrite the style, you can just use a comma-separated list:

#charlieID, 
.alphaClass {
    font-size: small; 
    color: lime;
}

Since you indeed are able to edit the CSS, you can also look into a higher-level language, for example LESS. In LESS, you could then do:

.alphaClass {
    font-size: small; 
    color: lime;
}

#charlieID {
    .alphaClass
}

Upvotes: 2

Keoki
Keoki

Reputation: 304

Here's a good explanation of when to use ID's and CLASS: http://css-tricks.com/the-difference-between-id-and-class/

And to your question, an element can have both and ID and class at the same time.

Upvotes: 0

Related Questions