I run into this a lot and it's fairly annoying. Does anyone know about this:
#content h5 {
color:red;
}
#next h5 {
color:blue;
}
When the markup looks like this:
<div id="content>
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
The blue h5 will actually appear red, what gives?!
I had no problems with it. You do have a quote mark missing after content though. Below is what I tested with
<html>
<head>
<style>
#content h5 {
color:red;
}
#next h5 {
color:blue;
}
</style>
</head>
<body>
<div id="content">
<h5>RED</h5>
<div id="next">
<h5>BLUE</h5>
</div>
</div>
</body>
</html>
No, it won't.
That's because of what is known as CSS Specificity, here is a good tutorial about it:
Specifics On CSS Specificity
Related
I need to select the paragraph before the read more so that I can expand the height to the full height of the paragraph. I don't know how I can select it with the :focus selector
.main {
background: red;
}
button:focus **select the one div** {
background: pink;
}
<div class="main">
<div class="one"><p>This is a paragraph. Extra words, Bla Bla........</P></div>
<button>Read More<button>
</div>
Try it. Sibling combinator works only like this. From top to bottom tag
<html>
<head>
</head>
<body>
<div class="main">
<button>Read More</button>
<div class="one">some</div>
</div>
<style>
.main {
background: red;
}
button:hover + .one {
background: pink;
}
</style>
</body>
</html>
Maybe use the :has() pseudo-class but beware it's currently not supported by all browsers (especially not Firefox)
.main:has(button:focus) .one>p {
height:auto;
}
Fiddle example : https://jsfiddle.net/6me19dLy/
"Can I use" report : https://caniuse.com/css-has
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
I can't workout how to get the second paragraph to display in this example code. I've only tried it in Firefox.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: none;
}
.show {
display: initial;
}
</style>
</head>
<body>
<p>para 1</p>
<div class="show">
<p>para 2</p>
</div>
</body>
</html>
body{
visibility:hidden}
.show {
visibility: visible;
}
<p>para 1</p>
<div class="show">
<p>para 2</p>
</div>
you can try this instead
I'm going with this:
p {display: none} .show p {display: initial}
It's more work for me, but it does what I want. Thanks.
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;}
Code and preview:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
My question is: is it possible to place another date section next to the first one, so it appears like this: what i want http://img505.imageshack.us/img505/2787/previewsp2.gif
EDIT: strange, I tried floating before I asked the question and it didn't work...thanks everyone :D
use style="float:left" on each DIV (either directly or via a stylesheet)
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
border:1px solid green;
display:table;
height:3.25em;
float: left;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div id="dContainer2">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
float:left if you want block elements to sit next to each other.
Copy dContainer and place the copy immediately after it.
Change the ID and the new ID to the #dContainer style.
Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.dDate {
display:table-cell;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding-left:1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
[EDIT] Looking at the other answers:
- Float is of course the right answer, I just went with the initial logic, actually finishing it (making a real table might be actually the logical final step...)
- Note: doesn't look nice in IE (6, 7).
Is there any reason why you can't use <span> tags instead of <div>'s? That way your page would still make sense when read without CSS.