Why does changing a CSS class name break the styles?
Thanks to @MrLister--
The problem is AdBlockPlus, which was blocking the element--Looking at the filter list here it's apparent that banner-ad
and many other variations I thought of were automatically filtered by the ad blocker.
Should css class names like 'floatleft' that directly describe the attached style be avoided?
It's great until you re-design, and narrow
is highlighted yellow, center
converts better left-justified, and the image you called floatleft
now belongs on the right.
I'll admit to the sin of using floatleft
and clear
as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback
and heroimage
.
Why changing the id of an article HTML element breaks CSS style?
This is because the id me
is being styled in the CSS
.
Taken from the CSS (I downloaded it):
#me
{
}
#me .pic
{
position: relative;
display: block;
}
#me .pic:before
{
content: '';
position: absolute;
top: 0;
left: 0;
background: url('images/overlay.png');
width: 100%;
height: 100%;
z-index: 1;
}
Basically, if you want to change the #me
ID, you have to go into the CSS
style sheets and change it there too.
Update
There are various different stylesheets. I took that snippet from style.css
, however there is also style-desktop.css
that has various different #me
styled in. My recommendation is to go through every css
file and edit every instance of #me
to be what you want.
Overwrite CSS class selectors without !important
In general you should know that rules are applied (if both are in external stylesheets) with specificity rules
.
Generally there is a score you can think about, and the rule applying to the element that has the highest score will be applied.
In a selector chain, each element type is worth one, classes are worth 10, and an id is worth 100 points.
body div.wrapper == 12 points
body div.wrapper div span == 14 points
body #quote == 101 points
So generally just make the page-specific rules (that style the rest of your page) less specific, and let the UI CSS take over. Alternately you could always put the UI markup inside a "super" bit of HTML, like:
<div id="super">
<div id="super2">
//your UI stuff
</div>
</div>
And then "namespace" the CSS for the UI by putting #super #super2
before each rule on that style sheet.
Do not apply certain CSS class styles to specific class
You can use the :not()
CSS pseudo-class. ( On MDN )
.container > .row > .col > *:not(.parallax-container) {
//styling
}
Note: realize this is a demonstration, I'm not going through every BootStrap property that would be applied innately, and you would have to do that yourself:
.container > .row > .col > *:not(.parallax-container) { background: rgba(0,0,255,.5);}
<div class="container"> <div class="row"> <div class="col">
<h1>Things</h1> // Do not apply here <div class="parallax-container break-grid"> <div class="parallax"> <span>whatever</span> </div> </div>
<h2>Stuff</h2> </div> </div></div>
How to reset/remove CSS styles for a specific element or selector only
The CSS property all
has a keyword initial
that sets the CSS property to the initial value as defined in the spec. The all
keyword has broad browser support except for the IE and Opera Mini families.
/* basic modern patch */
#reset-this-root {
all: unset;
}
or
#reset-this-root {
all: initial;
}
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
- Relevant GitHub repo with a December 2017 more exhaustive list
- Related
- Related from MDN
- Related W3C specs
With all this said, I don't think a CSS reset is something feasible unless we end up with only one web browser, if the 'default' is set by browser in the end.
Change CSS of class in Javascript?
You can do that — actually change style rules related to a class — using the styleSheets
array (MDN link), but frankly you're probably better off (as changelog said) having a separate style that defines the display: none
and then removing that style from elements when you want them no longer hidden.
Related Topics
Neatly Display Images of Different Sizes Sequentially in The Same UI Element
Why Is Blue Circle Not Spinning in The Center of Itself
My Dropkick Plugin's Dropdown Looking Strange
What Does The Smiley Face ":)" Mean in CSS
CSS Deprecate Single Class When There Are 2 Classes
Flex-Basis for Wrapping Columns
How to Style an Independent Tableview Column
Bootstrap Align Columns of Different Height
PHPstorm Less Watcher Configuration