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.
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.
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
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
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
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.