Here's some code:
<div id="one">
<div id="two">
<div class="cell_pad">
</div>
</div>
</div>
How to tell to css, that you have to change value of class "cell_pad" which is in id="one"?
.cell_pad is repeated a few times in code, but I've to change one occurence of this class.
I'm using sparky framework for joomla.
I've tried like that in my stylesheet, but it doesn't effect:
#one > .cell_pad{}
you should use
#one .cell_pad{}
that Selects all .cell_pad elements inside #one elements, you sould take a look here http://www.w3schools.com/cssref/css_selectors.asp
You should use this :
#one .cell_pad
{
}
This will select all the .cell_pad elements in #one element
Related
Say I have the following HTML structure:
<div id="outer">
<div id="target">
</div>
</div>
The outer div may or may not have the id "outer".
I want to apply styles to #target only when its not contained within a div having the id "outer":
<div id="something-else">
<div id="target">
</div>
</div>
With LESS, I tried the following:
:not(#outer) {
#target {
// styles
}
}
This doesn't work apparently (I guess because the :not operator is not excluding its nested elements).
Is there any way to achieve this with CSS / LESS? Of course I know that I can refactor the html / logic so that I apply the styles without using :not, but I'm wondering if theres a way to achieve what I'm asking as is.
Try this
:not(#outer) > #target {
// Styles
background-color: red;
}
}
Here's a little fiddle you can try.
In the following markup, I want to apply css to only div with class .box which comes immediately after the .wrap. If it comes after the <p> or any other class than the .wrap, I do not want to select it.
<div class="wrap">
<div class="box">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
I have tried to look the adjacent sibling selector, but does not seem to work in this case.
.wrap + .box{
background: red;
}
JSFiddle: http://jsfiddle.net/8fjuz7sm/
I cannot use :first-child as it can occur only once too.
Write:
.wrap .box:first-of-type{
background:red;
}
DEMO here.
OR
.wrap .box:nth-of-type(1){
background:red;
}
DEMO here.
as #Hiral says, you'll have to either use first-of-type or nth-of-type(1).
If you cannot do this, but have access to the html, you'll have to add another class to the elements you wish to apply the class on, such as
<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
or you can use javascript and/or jquery to select the first element then apply styling via javascript.
Jquery Example
$(".wrap .box").eq(0).css("Background-color","red")
I edited your JSFIDDLE : http://jsfiddle.net/8fjuz7sm/4/
I recommend using jQuery for this because older browsers may not support the pure css solution :
create a new class :
.wrapperbox {
background: red;
}
Then add this jQuery code to your script :
$( ".wrap > .box:first" ).addClass( "wrapperbox" );
After this every html element with the class wrap which has a child box will get a class wrapperbox and there you can do your css
When you dont want to do jQuery you can use this :
.wrap .box:first-of-type{
background:red;
}
It will select the first child of wrap with the class name box and then do your css
My question:
Is it possibile to ONLY change one element of a class without (a) giving it an own ID and (b) without doing inline-style in the HTML document?
Why do I want to do that?
I am using a software where the program creates classes and ids by itself (for a questionnaire). I cannot change or add classes/ids nor can I change the html. The only thing I can do is grab those already defined classes with CSS and style them (which is what I want to do).
Example:
JSFiddle: http://jsfiddle.net/nyGWc/
In this example I only want to change the background-color of the second ".class2" to green (whereas the first ".class2" div should remain red).
<div class="class0">
<div class="class1">
<div class="class2">
This div has a red background color.
</div>
</div>
</div>
<div class="class0">
<div class="class1">
<div class="class2">
This div should be green without adding an ID to it.
</div>
</div>
</div>
CSS:
.class1 {
height: 3em;
}
.class2 {
background-color: red;
}
What I've tried so far:
I've tried to use :nth-child(2) and :nth-of-type(2) but as far as I've understood it, it only selects the target child under a parent element? In my example the div elements with the class ".class2" are not siblings. So those won't work.
Thanks a lot!
As you rightly said, since the class2 elements are not siblings, you cannot use nth-child. So the solution to your problem is using nth-child for class0. Here is the code
.class0:nth-child(2) .class2{
background-color: green;
}
FIDDLE
Select the second class0, then select its child class2. Using nth-of-type allows the .class0 elements to not need to be under the same parent element.
.class0:nth-of-type(2) .class2 {
background-color: green;
}
Fiddle
Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.
For example, in the following snippet:
<tr>
<td align="center">123</td>
<td class="someclass">abc</td>
</tr>
I would like select all <tr> elements that have a <td> with the class="someclass".
I am wondering if this is possible in css, without using javascript. Thanks.
What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.
Example HTML:
<div class="box">
<div class="green">
Some text
</div>
</div>
<div class="box">
<div class="red">
Some Text
</div>
</div>
Example CSS:
.box {
color: blue;
}
.box .green {
color: green;
}
.box .red {
color: red;
}
As you can see, you can select the parent element by itself but not based on a child's attributes.
Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.
Example HTML:
<div class="box green">
Some Text
</div>
Example CSS:
.box.green {
color: green;
}
You can see in the above CSS that you can "stack" the classes to select the proper element.
Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.
To select elements with a particular class:
.someclass{
color: red;
}
I would like select all elements that
has a with class attribute
"someclass".
If by selection you mean node selection that you can only use JavaScript.
jQuery:
$(".someclass").doStuff();
But if by selection you mean CSS selection then:
CSS:
<element class="someclass"> can be selected using .someclass in CSS.