can someone please explain the difference in the following:
div.main
{
font-family:Arial, sans-serif;
}
.main div
{
font-family:Arial, sans-serif;
}
I'm not sure when to use each one.
I'll give a sample HTML code for each css style:
First example - Targets all div that has a class of main
div.main {
color:red;
}
<div class="main">
<p>SAMPLE</p>
</div>
Second example - Targets all div that is a child of an element that has the class of main
.main div {
color: red;
}
<div class="main">
<p>NOT AFFECTED</p>
<div>
<p>AFFECTED</p>
</div>
<div>
<p>AFFECTED</p>
</div>
<div>
<p>AFFECTED</p>
</div>
<div>
<p>AFFECTED</p>
</div>
</div>
I think you should learn all this by implemeting it or by reading css selectors and css specificity.
For more info css selector
div.main { font-family:Arial, sans-serif;}
Above code will target all div which having main as class.
.main div { font-family:Arial, sans-serif; }
Above code will target all div which is child of main class.
Your first rule says:
Find all div elements having main class
Your second rule says:
Find all divs that are placed inside all elements having main class.
Please read about basic concepts of CSS
Related
I'm trying to target an <h1> element within a <div> using the CSS first-of-type property, but I noticed that not only does this target the first child of this <div> that is of type <h1>, but it also targets the children of children that are of type <h1>, which seems less useful to me. Is there any way that children of children can be excluded from this?
In the example below, I have an <h1> that's an immediate child of a <div> called #everything. I try targeting that <h1> in the CSS, but this results in targeting both the correct <h1> as well as another <h1> within a child <div>.
#everything h1:first-of-type{
color: red;
}
<div id="everything">
<h1>hello</h1>
<div id="something">
<h1>goodbye</h1>
</div>
</div>
Is this what you wanted?
#everything>h1:first-of-type{
color: red;
}
<div id="everything">
<h1>hello</h1>
<div id="something">
<h1>goodbye</h1>
</div>
</div>
Update your css code with this.
#everything > h1{
color: red;
}
One more option:
#everything:first-child > h1 {
color: red;
}
For this option #everything:first-child you need to specify the child h1 or it's class/id.
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 -->
I am looking to create the effect shown in the following image:
Where the black background behind the text staggers, rather than creating a black box when the string wraps. Can this be achieved with just CSS on a dynamic string?
This is actually the default behaviour for inline elements, such as span.
The following code should have this effect.
<span style="background-color: black; color: white">EYES ON<br/>FILM</span>
Note that the <br/> is there for illustrative purposes, it will also work if the text is wrapped by the browser.
If you need to do this for a div, make sure to set the display: inline style on it.
Here is how you do it. The basic idea is to wrap each word in a separate div and nest those divs within another div with a width that wraps the inline divs.
<style>
.foo {
display: inline;
background-color: #000;
color: #fff;
margin: 0;
}
.wrapper {
width: 100px;
}
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
</div>
Something along these lines?
http://jsfiddle.net/wxDa7/
<style>
#a
{
width:50px;
font-size:20px;
line-height: 90%;
text-transform:uppercase;
}
#a .b
{
background-color:black;
color:white;
}
</style>
<div id="a">
<span class="b">Test test </span>
</div>
This autobreaks at a defined width. Use %nbsp; to get the extra space after the text.
It works putting the text inside a <span> inside a <p>, or using the Teletype Text Element (<tt>), or <code> tag.
<tt> is not accepted in HTML5.
Example jsfiddle:
http://jsfiddle.net/gmDWP/
I am currently designing a website . But in one of my parent div box_t,the child divs box_t1 and box_t2 goes outside the box_t.
Html:
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
</div>
CSS:
#main_container
{
width:960px;
margin:0 auto;
}
.box_t
{
padding:20px 14px 20px 15px;
color:#07337a;
overflow:hidden;
}
.box_t h2
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.box_t1
{
width:340px;
float:left;
}
.box_t2
{
float:left;
}
.box_t2
{
margin-left:255px;
}
.boxt21
{
float:left;
}
.boxt22
{
float:left;
}
Your child divs are not going outside the parent div, but what you see on dream waver is due to dream waver's style of displaying the html contents.
Check actual rendering of your code in browser
You should use clearfix for parent block.
There a lot of ways to do it set overflow:hidden or set at bottom element with clear: both empty block inside parent.
My fav way is:
// for modern browsers
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6-7 */
.clearfix {
zoom: 1;
}
Use it class on your parent div and that's it.
When ever you use the float for your div. Do remember to clear the float.The whole problem is that floated objects do not add to the height of the object the reside in properly. And hence child div appear to be outside of parent div.All we need to do is clear the float, and this entire problem goes away. Put this empty div AFTER your last floated object:
<div style="clear: both;"></div>
You need to clear your floats
<div id="main_container">
<div class="box_t">
<div class="box_t1">
<h2>Start</h2>
</div>
<div class="box_t2">
<div class="boxt21">
<h2>Name</h2>
</div>
<div class="boxt22">
Hi
</div>
</div>
</div>
There is a better way to do this, create a class called clearfix and add it to the br... well really you should even include a br... but there you go.
I would suggest using borders (style="border:1px solid red") on all the div while developing a layout, it helps to know where exactly the divs are positioned.
This helps developers who dont use Dreamweaver or other editing tools.
Let say I got this page:
<body>
<h1>Hello!</h1>
<div class="wrapper">
<div class="anotherclass">
<h1>Another heading 1</h1>
</div>
<div class="yetanotherclass">
<h1>Yet another heading 1</h1>
</div>
</div>
<h1>Good bye!</h1>
<div class="class">
<h1>Good bye. And this time I mean it.</h1>
</div>
</body>
And I want to select all H1 elements that are NOT within the wrapper-class. How can I do that with CSS?
I don't want a "solution" like
body h1, body .class h1 {style definitions}
I'm more after some kind of this:
h1:not(.wrapper > h1) {style definitions}
Is there any way to do this?
What if you did something like this:
h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }
In h1.class you would override everything that you defined in your h1 rule.
Here is an example:
<html>
<head>
<style type="text/css">
div { color:#00f; }
div.foo { color:#f00; }
</style>
</head>
<body>
<div class="foo">foo</div>
<div>bar</div>
<div>baz</div>
</body>
</html>
In this example I have effectively targeted all divs that do not have a class of foo.
You can't do what you're asking with css. The whole idea around css is the cascade, and what you're wanting to do is work against the flow of the cascade.
Work with the tide do regular css:
h1 {style definitions}
.wrapper h1 {style definitions}
You can use the universal selector * to apply global styling and then apply a nested universal selector: .wrapper * to undo the styling you applied originally
* {font-weight:bold; border:thin solid red;}
.wrapper * {font-weight:normal; border: 0px solid white;}