CSS Questine
- Started
- Last post
- 19 Responses
- monNom0
what if you used a utility class that just obliterates all styling?
ie
<div class="parent">
<div id="child" class="reset simpleChildClass">....parent {
background: blue;
}/* #child is transparent */
.parent div{
background: green;
}/* #child is green */
.reset {
background:transparent; ...
}/* #child is transparent */
.simpleChildClass{
background: red;
}/* #child is red */
.reset would need to be a verbose list of all styles and defaults for them, but you could reuse anywhere/everywhere.
- dbloc0
actually this one is nicer.
http://codepen.io/pen/
- mekk0
yep,
.someshit {
color:#000; !important
}I'll send you my bank data via mail
- moldero0
adding:
color:#000;already does it and I understand that if sometimes it doesnt work then i use !important
but what if I have this on the parent CSS:
a.button, a.comment-reply-link, #commentform #submit, .submit, input[type="submit"], input.button, button.button, #wrapper .woo-sc-button {
display: inline-block;
padding: .327em 1em;
color: #ffffff !important;
text-align: center;
border-top:#555555 solid 1px !important;
text-decoration: none;
font-size: 12px;
/* Make inputs the same size as normal text */
font-family:'Arimo', arial, sans-serif;
/* Make inputs use the correct typeface instead of the browser default */
cursor: pointer;
/* Inputs need pointers! */
overflow: visible;
width: auto;
/* IE fix */
line-height: 1.618em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
font-weight: normal;
text-transform: inherit;
box-shadow: 0 0 0 0 #888888;
-webkit-box-shadow: 0 0 0 0 #888888;
-moz-box-shadow: 0 0 0 0 #888888;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
text-shadow: none;
-webkit-appearance: caret;
/* Remove input shadowing on iOS */
-moz-appearance: caret;
/* mobile firefox too! */
background-color:#000000;
filter: progid:DXImageTransform.Microsof... endColorstr='#111111') !important; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#111111)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #222222, #111111) !important; /* for firefox 3.6+ */
}and i want to kill all that shit through the child.css
- hereswhatidid0
Don't specify rules in a way that they are inherited by their children? Make the rules that are specific to the parent part of some other class.
.parent.parent-with-margin {}
- ESKEMA0
the order by which they are loaded counts.
How are they beeing called in the HTML?
- ESKEMA0
And why don't you simply modify the parent? It's not a good practice to have several rules contradicting each other.
- mekk0
what I meant is to prevent the property from being overwritten if you put !important behind it.
You can't really 'kill' the setting, because there is always a default setting, you can't go back to it with a command in css or so.
you could use multiple classes or another id for the box set if you have access to it
- moldero0
CSS4 request
.cancelallthatoldshit: activate~robotvoice;
- Xopher0
Try this, not 100% sure mind...
.parent-selector .child-selector {
colour:brown;
margin:50px
}
- moldero0
if it was only 2 lines, no prob,
but this mother fuckers theme has 10000000 styles on one god damn button, & i just need a few..someshit {
.cancelallthatoldshit: activate~robotvoice;
colour:brown;
margin:50px;
}
dunzo
- moldero0
#someshit {
style:none; <cancels all parent styles and styles above this line
}
(not sure if CSS reads things in an order of to to bottom though)
would be cool.
- moldero0
and whats the difference between:
#someshit
&
.someshit?
- Xopher0
#id for unique shit
.class for reusable shit - also can apple multiple classes to shit