<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
How to Write Css style for this type of DIV element using the attribute disabled
Use the attribute selector [attr=value]
.td[disabled=disabled] {
color: red;
}
<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
You can select your div by using its disabled attribute. Here is the the CSS code which select that div by its attribute.
CSS Code-
div[disabled="disabled"]{
color:white;
background-color:green;
}
you can use :
.td[disabled="disabled"]{
background-color: red;
}
<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
}
Related
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
Why does the css :hover effect not work?
http://jsfiddle.net/t7on1k15/
body,html
{
font-family: courier;
height:100%;
min-width: 100%;
margin:0;
padding: 0;
}
#idDivBodyWrapper
{
margin:0;
padding:0;
height: 100%;
width: 100%;
background: lightgray;
}
#four:hover
{
color:black;
}
The HTML
<div id="idDivBodyWrapper" style="vertical-align:middle;">
<div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>
<table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>
</td></tr></table>
</div><!--end idDivBodyWrapper-->
Here is one that does work:
http://jsfiddle.net/tuxdukz4/
CSS - CASCADING style sheets. You've got style="color:white" inside your h1#four element. That color:white is at a higher precedence level than your external style sheet rule, so color: white overrides the :hover style.
If you mod your fiddle and put color:purple into the h1's style= attribute, you'll get the exact same behavior: the hover won't work.
Because of CSS Specificity. I truly recommend you to read about it: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You have an element-level style color: white that overrides the hover effect.
Check this for a working one: http://jsfiddle.net/t7on1k15/1/
fiddle: http://jsfiddle.net/t7on1k15/2/
change the <h1 id="four" style="font-size:10vh;color:white;"> html to this:
<h1 id="four">Code that lasts.<br><br></h1>
and then add this css:
#four {
font-size:10vh;color:white;
}
your inline style has highest precedence over other css code.
I believe that putting the style inline ("style="font-size:10vh;color:white;") takes precedence over css. Inline style has higher priority. You actually couldn't style #four without hover in css if you use an inline style.
<td class="col" style="display:none">AAA
<span prop="1" class=" clear-icon " style=""></span>
</td>
I want to use pure css to hide text "AAA" to show span btn.
Is there a way to do it in pure css?
If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-size of the td to 0, it will hide the text node completely:
.col[style*="display:none"] {
display:table-cell!important;
font-size:0;
}
.col > span {
font-size:20px;
}
Demo.
You can use visibility property but this will reserve the space for text "AAA":
.col {
visibility:hidden;
}
.clear-icon {
visibility:visible;
}
Also, if you can't remove display:block !important; from your td tag just add !important rule in CSS
.col {
display:block !important;
visibility:hidden;
}
http://jsfiddle.net/vLNEp/4/
<table><tr><td class="col"><span class="hidden">AAA</span>
<span prop="1" class="clear-icon"></span>
</td></tr></table>
.col .hidden {position:absolute;top: -9999px; left: -9999px;}
.col {
visibility:hidden;
}
.col span {
visibility:visible;
}
<table>
<td class="col">
AAA <span>Show Me</span>
</td>
</table>
I'm trying to change the background color of the selected item but can't get it work.
HTML:
<table class="select_payment_method_table">
<tr>
<td class="payment_details_cc">
<input id="visa1" type="radio" name="visa1" value="a1" checked="checked"/>
<span class="visa_card_img"> Credit Card (VISA / MasterCard)</span>
<div class="clearfix"></div>
<div class="payment_img_main"><img src="image.png"></div>
</td>
</tr>
I tried this, but it doesn't work:
CSS:
.select input[checked]
{
background-color:white;
}
Your syntax is a bit wrong (assuming you do have a .select class, because it's not in your HTML):
.select input:checked
{
background-color:white;
}
For further reading on :checked selector
If you want to select the radio element itself, you could use this:
input[type="radio"]:checked { background-color: blue; }
If you wish to select the background of the element text next to the radio element, then you could use this:
input[type="radio"]:checked+span { background-color: blue; }
And combine the rules if you want both. Hope that helps.
input:checked
{
background:#ff0000;
}
There is no class called select. This style is supported only by Opera.
Is it possible, other than what I'm doing because it doesn't seem to work, to do this? I want to be able to have subclasses that are under a class to use the CSS specifically for that class.subclass.
CSS
.area1
{
border:1px solid black;
}
.area1.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2.item
{
color:blue;
}
HTML
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
<div class="area2">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
So that I can just use class="item" for the elements under the parent css class "area1","area2". I know I can use class="area1 item" to get this to work, but I don't understand why it has to be so verbose about it. Shouldn't the css subclass look at what parent class it is under in order to define it?
Note: this works in IE (using 7 right now), but in FF it does not, so I'm assuming this isn't a CSS standard way of doing something.
Just need to add a space:
.area2 .item
{
...
}
FYI, when you define a rule like you did above, with two selectors chained together:
.area1.item
{
color:red;
}
It means:
Apply this style to any element that has both the class "area1" and "item".
Such as:
<div class="area1 item">
Sadly it doesn't work in IE6, but that's what it means.
Your problem seems to be a missing space between your two classes in the CSS:
.area1.item
{
color:red;
}
Should be
.area1 .item
{
color:red;
}
do you want to force only children to be selected? http://css.maxdesign.com.au/selectutorial/selectors_child.htm
.area1
{
border:1px solid black;
}
.area1>.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2>.item
{
color:blue;
}
Just put a space between .area1 and .item, e.g:
.area1 .item
{
color:red;
}
this style applies to elements with class item inside an element with class area1.
Just put a space between your classes
.area1 .item
{
...
}
Here's a very good reference for CSS Selectors.
Following on from kR105's reply above:
My problem was similar to that of the OP (Original Poster), only occurred outside a table, so the subclasses were not called from within the scope of the parent class (the table), but outside of it, so I had to ADD selectors, as kR105 mentioned.
Here was the problem: I had two boxes (divs), each with the same border-radius (HTML5), padding and margin, but needed to make them different colors. Rather than repeat those 3 parameters for each color class, I wanted a "superclass" to contain border-radius/padding/margin, then just individual "subclasses" to express their differences (double quotes around each as they're not really subclasses - see my later post). Here's how it worked out:
HTML:
<body>
<div class="box box1"> Hello my color is RED </div>
<div class="box box2"> Hello my color is BLUE </div>
</body>
CSS:
div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}
Hope someone finds this helpful.
That is the backbone of CSS, the "cascade" in Cascading Style Sheets.
If you write your CSS rules in a single line it makes it easier to see the structure:
.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }
Using multiple classes is also a good intermediate/advanced use of CSS, unfortunately there is a well known IE6 bug which limits this usage when writing cross browser code:
<div class="area1 larger"> .... </div>
.area1 { width:200px; }
.area1.larger { width:300px; }
IE6 IGNORES the first selector in a multi-class rule, so IE6 actually applies the .area1.larger rule as
/*.area1*/.larger { ... }
Meaning it will affect ALL .larger elements.
It's a very nasty and unfortunate bug (one of many) in IE6 that forces you to pretty much never use that feature of CSS if you want one clean cross-browser CSS file.
The solution then is to use CSS classname prefixes to avoid colliding wiht generic classnames:
.area1 { ... }
.area1.area1Larger { ... }
.area2.area2Larger { ... }
May as well use just one class, but that way you can keep the CSS in the logic you intended, while knowing that .area1Larger only affects .area1, etc.
The class you apply on the div can be used to as a reference point to style elements with that div, for example.
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
.area1 { border:1px solid black; }
.area1 td { color:red; } /* This will effect any TD within .area1 */
To be super semantic you should move the class onto the table.
<table class="area1">
<tr>
<td>Text Text Text</td>
<td>Text Text Text</td>
</tr>
</table>
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div>
each item in the class is its own class
.item1 {
background-color:black;
}
.item2 {
background-color:green;
}
.item3 {
background-color:orange;
}
kR105 wrote:
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div
I can't see the value of this, since by the principle of cascading styles, the last one takes precedence. For example, if in my earlier example I changed the HTML to read
<div class="box1 box2"> Hello what is my color? </div>
the box's border and text would be blue, since .box2's style assigns these values.
Also in my earlier post I should have emphasized that adding selectors as I did is not the same as creating a subclass within a class (the first solution in this thread), though the effect is similar.
Additionally to the space needed between the nested classes:
.area2 .item
{
...
}
There is a css precompiler called Sass that could help you with the verbosity of css. It uses the extension .scss, you can search for the complete way to use it, but when using, the sintaxis of your code could be reduced to something like:
.area1
{
border:1px solid black;
.item
{
color:red;
}
}
.area2
{
border:1px solid blue;
.item
{
color:blue;
}
}