Develop Reference

Removing a CSS rule that's applied to all elements

I have a problem with being unable to remove a rule that is applied to all elements. First of all, apologies but I could not upload a JSfiddle to this post - the page URL is: http://www.chessdroids.com/matches/long/test2.html
The problem is the CSS rule ‘* { text-align: center }’ is being used throughout the site and I cannot remove this, but it is making the chess board align incorrectly. Removing the rule works but destroys other areas of the site.
How can I remove this rule to the chess board only? I have tried using the not selector and canvas-board > * {display:none !important} but to no avail (note that I made the red canvas-board div wrap just to wrap the chess board). FYI I am using the canvas chess viewer: http://www.canvaschess.com/pgn_install.php.
Any help would be greatly appreciated here as I’m unsure how to fix this, thank you.

.canvaschesspgn .pgn_main_box {
text-align: left;
}

Change
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
outline: 0 none;
}
to
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
display: block !important;
outline: 0 none;
}
So text-align does not apply only to the chessboard

try
.canvaschesspgn > * {
text-align: left;
}

If you want to reset anything you can use this
* {
text-align: unset;
}
that should do it, enjoy
and here are the css doc

How to make td tag look like a tag in HTML?

I have some rows that using ajax to get data, if I use a tag, the browser will be refresh and some data will lost. Then I just use td tag, but I want to make it look like a tag (color, cursor a hand)
Here my code:
<td style="color: green;" onclick="myFunction(this)">hello</td>
// failed with: <td style="color: green;" onclick="myFunction(this)">hello</td>

You can use following css to give td look and feel like a.
td {
color: #337ab7;
text-decoration: none;
cursor: pointer;
}
td:focus, td:hover {
color: #23527c;
text-decoration: underline;
}

Color should work the way you have it.
for cursor you could try
td {
cursor: pointer;
}

You should use a, but return false after your function and use # as href value:
hello

While you could do that using the cursor: pointer CSS-property, I'd rather use the <a> tag and set a click event handler like this:
<a id="clickable">Click</a>
<script>
document.getElementById("clickable").addEventListener('click', function(e) {
alert("Clicked")
e.preventDefault()
return false
})
</script>
See a working example here

A <td> tag is actually part of the <table> tag and should not be used outside it.
What you're better off doing is simply creating a new button using a <div> element and some CSS
.button {
display: inline-block;
padding: 5px 12px;
background: #09c;
color: #eee;
cursor: pointer;
border-radius: 3px;
border: 1px solid #28f;
}
<div class="button">My button text</div>
display: inline-block causes the <div> element to not take up the entire width of the page (just wrap the contents).
cursor: pointer will make the cursor literally look like a pointer when hovering over the element.
Not using a table tag here makes much more sense since you're not displaying a table (From what I can see in the question).
And that's pretty much it!

ExtJS - How to customize buttons?

I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim

simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}

Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc

Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}

I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}

Override a CSS Class

I have created a few classes in my javascript file that will be essentially referenced in the CSS file as "tr.Yes" "tr.No" and the new one "tr.override".
I want to override the values of tr.Yes and tr.No with tr.override due to a few added constraints in the JS file. Basically, how would I override them with tr.override that has a background of green?
Thanks guys.
My CSS so far looks as follows:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}

If you want the override class to override the yes and no classes define your overrideclass after the other ones in your CSS file and redefine the same rules with different values.
Like this
tr.Yes td.IndicatedDispatch {
background: red;
}
tr.Override td.IndicatedDispatch {
background: green; /* Redefine here*/
}

You can override CSS declarations by making them more specific. Go higher up the DOM.
tr.Yes td.IndicatedDispatch {
background: yellow;
}
becomes:
table tr.Yes td.IndicatedDispatch {
background: red;
}
Related article: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

If you're going to add the override class and leave the original classes, you create a combination rule like this:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}
tr.Yes.override td.IndicatedDispatch ,
tr.No.override td.IndicatedDispatch {
background: green;
}

CSS works from top to bottom, i.e selector1 css attributes will be overridden by selector1 css attributes defined at last(MORE SPECIFIC). For example
.myClass{
color: #000000;
}
/*
* Some other code
*
*/
.myClass{
color: #FFFFFF;
}
So at run time color:#FFF color will be picked up.

You could change your selectors to tr.Yes:not(.override) so that they do not take effect when the override class is in effect. Otherwise, both the tr.Yes and the tr.override styling will be merged, and anything from tr.Yes that is not overridden by tr.override will remain.

jQuery / CSS precedence when setting/overriding background-color

I'm using jQuery to addClass to a hovered over div...but the background color won't change. I'm guessing it's because it has previously been assigned a background-color in CSS? Other properties (border) on the hover class appear when hovering so addClass is working.
How can/should I make this work?
jQuery
$('.pick1-box').hover(
-> $(this).addClass('hover')
-> $(this).removeClass('hover')
)
CSS
.pick1-box, .pick2-box {
...
background: #eee;
...
}
.hover {
background-color: yellow;
border: 1px solid red;
}
html
...
<li class='nominee clearfix' id='146'>
<div class='candidate'>
<img alt="Enders" height="80" src="/assets/25803sm.jpg" />
Dick Waddington
</div>
<div class='pick-boxes'>
<div class='pick1-box'>
1
</div>
<div class='pick2-box'>
2
</div>
</div>
</li>
...

It depends how you're loading jquery and code but try this:
.hover {
background-color: yellow !important;
border: 1px solid red;
}

You can try re-ordering or adding an important to your CSS, or you could do something like:
$('.pick1-box').hover($(this).attr('style', 'background-color: yellow;border: 1px solid red;'),$(this).removeAttr('style'));
since element styles take precedence.

The problem, as you've stated, is because the style has been overridden in the style attribute of the element being affected. You have a couple of options:
Don't change the element's css directly.
Use !important on the settings you absolutely need to override element styles.
Change the element's css directly, but remove them once you're done with them.

You could make the 2nd rule more specific:
.pick1-box.hover, .pick2-box.hover {
background-color: yellow;
border: 1px solid red;
}
css specificity
This assumes that your .hover css actually occurs prior to the .pick1-box rule as these have equal specificity, the one which occurs later will have precedence.