Clearing styles applied to IDs/Classes within IDs/Classes sharing the same name

[TravisJohnston]

This is a request that I would like to see in future updates of CSS or in CSS3 hopefully. I would love to see a way where I could write in one line of CSS that would clear all styles applied to that ID/class.

Example:

I would like to apply some style to the parent .form-item, no problem.

.form-item

{

color:#FFFFFF;

font-weight:bold;

}

So thats easy but what if I don’t want that style to apply to the child form-item?? Sure if this is all hand coded, i’d just change the class, but some CMS/Modules/Themes are in control of the output so I am left dealing with doing the following:

.form-item

{

color:#FFFFFF;

font-weight:bold;



.form-item

{

color:#000000;

font-weight:normal;

}

}

Would be amazing if inside of the child form-item I could just place this

clear-style:clear-all;

and it would be all set. This would be especially useful when there are a lot of styles applied to a class/ID.

Love to hear your input and any solutions that already exist

Thanks,
Travis

[Paulie_D]

Why would you set up a class, apply it to a div and then change it?

Why not just use a different class for the child div?

I think you are reaching for a solution to something that isn’t a problem.

[TravisJohnston]

As I mentioned that would be the obvious solution if it wasn’t be controlled by something else.

For instance, I use Drupal with Views. Views allows me to create tons of custom orientations of content. But Views adds in a bunch of IDS/Classes and a lot of times the child DIVS share the same Class names. I could overwrite them with custom template files, but to do that over and over again just to deal with a few areas where it applies cause more work then its worth.

That is why having the ability to clear the style if this happens would be a very powerful and timesaving option.

A lot of times Drupal + Views will give read outs like this in a block

This is my name












This is my name but I want it to look different

Thats very sloppy but I just whipped that out. So you can see form-item as the parent class and the most useful class to use since the secondary class changes to much for it to be reliable when you want a style to apply all the time on that level. So lets say for that class I want to add a border around it, give it some padding, and a background color. But the div that actually holds the name I want to have a white background and there is not need for any border and also the original padding is not needed either.

.form-item

{

background-color:#000000;

padding:8px 5px;

border:1px solid #666;



.form-item

{

background-color:transparent;

padding:0;

border-none;

}

}

Now I had to add all that extra CSS just to get rid of what it was inheriting from its parent;

[TheDoc]

Actually you would just do this:

#some-selector > .form-item { /* your styles */ }

This will only select immediate children and nothing inside of .form-item.

[TravisJohnston]

Hmm, i haven’t seen > used before. What would you do if you use SASS though? Where .form-item would be by itself inside of other IDs/Classes?

#selector

{

.internal

{

/* styles */



.row

{

/* styles */



.form-item

{

/* styles */



.form-item

{

/* clear styles */

}

}

}

}

}

[TravisJohnston]

Yeah it looks like that would work only in standard CSS, but in SASS SCSS that wouldn’t work.

[TravisJohnston]

I just thought of using a mixin in sass/scss which is helpful so far but it assumes you have certain styles applied.

Check this out

@mixin clear($style) {

@if $style == 'clear-all' {

padding:0;

background-image:none;

background-color:transparent;

margin:0;

height:auto;

width:auto;

}

}





#selector

{

.form-item

{

height:470px;

max-width:470px;

width:100%;

float:left;

margin-right:25px;

margin-top:21px;

margin-left:10px;



.form-item

{

@include clear('clear-all');

}

}

}

[TheDoc]

#selector {

> .form-item {

// styles

}

}

[TravisJohnston]

Won’t work, breaks CSS.

[TheDoc]

That is perfectly acceptable SCSS format, I use it all the time. What does it break?

[TravisJohnston]

If I look at the rendered page and/or firebug, the code doesn’t get applied to either class, the parent form-item or the one inside.

[TheDoc]

Well, you of course would need to change #selector to whatever you are using.

[TravisJohnston]

Lol im not that dumb. Heres the code i was working with BEFORE the edit. Look at the big-image section.

#products-full /** Mix of overview and showcase **/

{

.panel-col-last

{

width:100%;

max-width:1210px;

margin-left:200px;

background-color:#d8d8d8;

padding-top:15px;

padding-bottom:50px;

color:#666666;



a,a:active

{

color:#2483AF;

}

.inside

{

margin:0;

margin-left:2px;

}



.internalright

{

padding:10px;

max-width:1150px;

width:100%;

margin-left:10px;



/** Top Tabs **/



.pane-products-bc

{

margin-bottom:20px;

height:20px;



.pane-title

{

display:none;

}



ul

{



li

{

float:left;

padding-right:10px;

text-transform:capitalize;



a

{

color:#000000;

}

}

li.active

{

color:#000000;



a

{

color:#000000;

}

}

}

}

.pane-products-tabs

{

clear:both;

margin-left:25px;

height:45px;

margin-bottom:-16px;



ul

{



li

{

float:left;





a

{

display:block;

padding-left:30px;

padding-right:30px;

padding-top:15px;

padding-bottom:10px;

font-size:1.6em;

color:#a3a3a3;

background-color:#666666;

border-top-left-radius:10px;

border-top-right-radius:10px;

}

a.active

{

background-color:#FFFFFF;

color:#2483af;

}

}

}

}



/** Title, Colors, Showcase **/



#the_big_image

{

height:470px;

max-width:470px;

width:100%;

float:left;

margin-right:25px;

margin-top:21px;

margin-left:10px;



#the_big_image               /* here is the trouble area with my latest fix */

{

@include clear('clear-all');

}



img

{

height:470px;

max-width:470px;

width:100%;

}

}

/* ......more code here but no matter */

So with the change you selected

#products-full /** Mix of overview and showcase **/

{

.panel-col-last

{

width:100%;

max-width:1210px;

margin-left:200px;

background-color:#d8d8d8;

padding-top:15px;

padding-bottom:50px;

color:#666666;



a,a:active

{

color:#2483AF;

}

.inside

{

margin:0;

margin-left:2px;

}



.internalright

{

padding:10px;

max-width:1150px;

width:100%;

margin-left:10px;



/** Top Tabs **/



.pane-products-bc

{

margin-bottom:20px;

height:20px;



.pane-title

{

display:none;

}



ul

{



li

{

float:left;

padding-right:10px;

text-transform:capitalize;



a

{

color:#000000;

}

}

li.active

{

color:#000000;



a

{

color:#000000;

}

}

}

}

.pane-products-tabs

{

clear:both;

margin-left:25px;

height:45px;

margin-bottom:-16px;



ul

{



li

{

float:left;





a

{

display:block;

padding-left:30px;

padding-right:30px;

padding-top:15px;

padding-bottom:10px;

font-size:1.6em;

color:#a3a3a3;

background-color:#666666;

border-top-left-radius:10px;

border-top-right-radius:10px;

}

a.active

{

background-color:#FFFFFF;

color:#2483af;

}

}

}

}



/** Title, Colors, Showcase **/



> #the_big_image

{

height:470px;

max-width:470px;

width:100%;

float:left;

margin-right:25px;

margin-top:21px;

margin-left:10px;



img

{

height:470px;

max-width:470px;

width:100%;

}

}

/* ......more code here but no matter */

[TheDoc]

Looks fine to me.

[Author]

Posts