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;
}
}
Related
<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>
}
how is the selector for the "item b" in this sample:
<td class="col_3">item before br-tag <br/> flexible item after br-tag</td>
This is not working:
td.col_3 > br
{display: none;}
Try using the following CSS selectors:
.col_3 {
color:red;
}
.col_3:first-line {
color:gray;
}
I am sorry to tell you that there is no selector for text-nodes. Only elements can be targeted with CSS. If you wish to style two text-nodes differently they need to be nested in two different elements.
Is there a problem with nesting your lines in spans?
<span>line 1</span><br>
<span>line 2</span>
You could then target line 2 with br + span {} or alternatively span:last-child {}
Edit: Now that I know you want a gray background, what you can do is place a semi-transparent area over it, like this (You may have to adjust the height):
.col_3 {
position:relative;
background:white;
}
.col_3::before {
content:' ';
position:absolute;
background:black;
opacity:.5;
bottom:0;
left:0;
width:100%;
height:50%;
}
<table>
<tr>
<td class="col_3">Line 1<br>Line 2</td>
</tr>
</table>
I am trying to create a div, that is created by adding multiple classes.
For a particulair reason, the width, height and size will not set. Instead they are the auto-size. When I add everything to one class, the size and such work, but as stated earlier when seperated, they will not do anything.
How I created the multiclass div (tried shuffeling the classes aswell)
<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>
Inside the CSS file:
.pos1{
display: inline; float:left;
}
.1x1 {
width:13.5vw;
height:13.5vw;
}
.1x2 {
width:13.5vw;
height:17.5vw;
}
.2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000000; color: white;
margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
border: white solid 2px;
}
Also creating one big class is not an option.
Thank you.
Class names starting with numbers are not valid! Your class name have to start with _, - or a letter (a-z)!
The pattern to validate a class name: -?[_a-zA-Z]+[_a-zA-Z0-9-]*
https://www.w3.org/TR/CSS21/grammar.html#scanner
See the following solution:
.pos1{
display:inline;
float:left;
}
.size1x1 {
width:13.5vw;
height:13.5vw;
}
.size1x2 {
width:13.5vw;
height:17.5vw;
}
.size2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000;
color:#fff;
margin:0 0.25vw;
border:2px solid #fff;
}
<div class="box pos1 size1x1">
<p class="verdana"> ... </p>
</div>
As other mentioned class name cannot start with numbers, and in pos1 you make the div to display as inline. Inline element does not have height, should use inline-block.
<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.