<style type="text/css">
.life-wrapper
{
font-family:lato;
font-size:15px;
font-weight:bold;
}
</style>
<div class="life-wrapper">
<div>
First Inner
<div id="second">
Second Inner
<label>Test Second Inner</label>
</div>
</div>
</div>
Here, I have the child div as "second". Here I want to restrict div "second" in such a way that it should not be displayed as parent div design.Here, I don't want to add any new css class for the inner div. I only need to restrict inner div to use main div css class.
Cascading Style Sheets are just that, cascading. So the child elements will inherit from the parents, and so on. The only way to work around it, is to make your "First Inner" text not to be a parent of the #second element.
As easy as wrapping it into a <span>First Inner</span> and setting the style on that: .life-wrapper span
<style type="text/css">
.life-wrapper span {
font-family:lato;
font-size:15px;
font-weight:bold;
}
</style>
<div class="life-wrapper">
<div>
<span>First Inner</span>
<div id="second">
Second Inner
<label>Test Second Inner</label>
</div>
</div>
</div>
Related
Let's say I have several <p> elements inside a <div> like this:
HTML
<div>
<p></p>
<p></p>
<p></p> <!-- I want to select the "last" element, <p> or not <p> -->
</div>
Now, say I want to style the last element, <p> or not <p>. One way to do that is to use the last-child selector on the <p>'s like this:
CSS
<style>
p:last-child {
/* Awesome styles go here */
}
</style>
Question
How do I style the last element (<p> or not <p>) by referencing <div> but NOT <p>?
Live Code Example
p:last-child {
color: red;
font-weight: bold
}
<div>
<p>Foo</p>
<p>Bar</p>
<p>Baz</p> <!-- I want to select the "last" element, <p> or not <p> -->
</div>
You can use > in your selector to describe direct children:
div > p:last-child {
}
This CSS will affect only the p tags which are the last child of div tag.
If, for some reason, you don't want to reference p at all, you can use * selector:
div > *:last-child {
}
It will affect the last child of the div whatever it is.
For example:
div > *:last-child {
font-weight: bold;
color: red;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div>
1
2
3
</div>
<div>
<span>1</span>
<i>2</i>
<i>3</i>
</div>
how to open div tag on hover a tag
Service is id of a tag
Services is id of div tag
My Html Code is
<ul><li>Services</li></ul>
<div id="Services">
<h1>Hello</h1>
</div>
and my css code is this
#Services
{
display: none;
}
#Service:hover + #Services
{
display: block;
}
#Services isn't a sibling of #Service, so the + selector won't match it.
Check this fiddle for modified markup which makes the two siblings. You will need to style it accordingly.
<ul><li>Services
<div id="Services">
<h1>Hello</h1>
</div></li></ul>
Add the #services as the siblings element of the #service. Then the code would work.
Such as this:
<div>
Hyperlink
<div id="services">Some text</div>
</div> <!-- or any other of the container element -->
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I have the following, simplified, code:
<div id="content">
<p>text</p>
<div id="container">
<div id="col1">
<p>text</p>
</div>
<div id="col2">
<p>text</p>
</div>
</div>
<p>text</p>
</div>
</div>
Whenever I set some values to the #content p element in the CSS file, the changes also apply to the #col1 p and #col2 p.
What I would like to do is select only the children p elements of the #content div and not select the grandchildren p elements.
I imagine that one way of doing it would be to add a class to the first children and then apply properties throught it.
Is there any better way of doing it in either CSS2 or CSS3?
Use the CSS Greater than sign > (Child selectors):
#content > p
A child selector matches when an element is the child of some element.
You can also set another style for the deeper <p> elements that override the one you already specified. Like so:
#content p { color: red; }
#content div p { color: black; }
I can add a CSS class to the outer-most DIV and the inner-most DIV tags with "display:inline" but, I cannot do that with some in between.
The markup is something like this...
<span>ABC</abc>
<div>
<div>
<div>
XYZ
</div>
</div>
</div>
I'd like the text ABC to be on the same line as the text XYZ, but because of the DIV tags, they are on seperate lines.
Well if there is a reason for you to have so many nested divs (you are unable to change the HTML etc.) you could apply a class to the outmost div and then use inheritence to apply display: inline;
HTML
<span>ABC</abc>
<div class="wrapper">
<div>
<div>
XYZ
</div>
</div>
</div>
CSS
.wrapper,
.wrapper div {
display: inline;
}
Add a class to the outermost div e.g. myDiv
CSS:
.myDiv, .myDiv div {
display: inline;
}
That makes the myDiv div and all div elements that are descended from myDiv display inline.
HTML:
<span>ABC</span>
<div class="myDiv">
<div>
<div>
XYZ
</div>
</div>
</div>
Demo: http://jsfiddle.net/waitinforatrain/nTPZY/