I've seen both this and this question, but they're both Javascript-oriented.
I'm looking to select the only div which has no ID or Class.
Example:
<body>
<div class="X" ... />
<div class="Z" ... />
...
<div class="Y" ... />
<div>Select me</div>
<div id="footnote" ... /> <!-- Notice I have no class. -->
...
</body>
There will only ever be one div with no class and id.
The div may change places, or be not present.
No Javascript. However any language which can compile to CSS like SASS is fine.
The divs in question will only ever be directly under <body>.
I may not always know what classes or IDs there will be.
You can use the :not:
CSS:
div:not([class]):not([id]) {
height: 200px;
width: 200px;
background-color: red;
}
HTML:
<div></div>
<div class="shikaka"></div>
<div id="shikaka2"></div>
http://jsfiddle.net/qcq0qedj/
You can do:
body > div:not([class]):not([id]) { }
JSFiddle
Ah... the beauty of :not. (AKA - not:ugly)
div:not([class]):not([id]) {
color: #fff;
padding: 2px 4px;
background: red;
}
<body>
<div class="X">...</div>
<div>Select me</div>
<div class="Z">...</div>
<div class="Y">...</div>
<div>Select me, too!</div>
<div id="footnote">...</div>
</body>
http://jsfiddle.net/stevenventimiglia/53Lqekod/
Related
I want to make boxes for those images, not for the entire row.
I've tried putting div tag with a class named caja-img, which contains a specific width.
HTML
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
CSS
.caja-img {
background-color: red;
}
Instead of coloring all the row, i just want to color the image.
You can style all <img> tags in your <div>. The CSS would look like this:
.caja-img img{
background-color: red;
}
What this is doing is styling all of the img elements inside of .caja-img.
You can set the element with the class .caja-img to display: inline-block.
See the code example below:
.caja-img {
background-color: red;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
I can't use two cursors in a page on the different elements can anyone help me why is happening?
.c-scrolldown{
cursor:pointer;
}
.c-scrolldown2{
cursor:pointer;
}
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2"></div>
</div>
<div class="c-scrolldown">
<div class="c-line"></div>
</div>
Just add some content inside divs and change cursor that you need.
.c-scrolldown{
cursor: pointer;
}
.c-scrolldown2{
cursor: progress;
}
<div class="c-scrolldown2" id="pointer-cursor">
Test 1
<div class="c-line2"></div>
</div>
<div class="c-scrolldown">
Test 2
<div class="c-line"></div>
</div>
Here you can find a bunch of different mouse cursors.
Sure you can.
You just need either some content or a defined height for your DIVs (in your code the DIVs have zero height):
.c-scrolldown,
.c-scrolldown2 {
height: 200px;
background: #ddd;
}
.c-scrolldown {
cursor: pointer;
}
.c-scrolldown2 {
cursor: crosshair;
}
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2"></div>
</div>
<br>
<div class="c-scrolldown">
<div class="c-line"></div>
</div>
You can use different cursors for different elements if you want to use it.
<html>
<head>
<style>
.c-scrolldown{
cursor:pointer;
}
.c-scrolldown2{
cursor:crosshair;
margin-bottom:30px;
}</style>
</head>
<body>
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2">Crosshair</div>
</div>
<div class="c-scrolldown">
<div class="c-line">Pointer</div>
</div>
<body>
<html>
Supoose you have something like
<div class="base">
<div>
...
<div class="ok">
<div>
...
<div class="ok"></div>
...
</div>
</div>
...
</div>
</div>
Here I've shown just a couple of DIVs, but it can be any level deep (note the ...)
So the question is: How can I style the first element with the class okwithout knowing how deep it is nested ?
Here is a DEMO in which you can see I style all the DIVs with the class ok
there is no selector for that, but there is override workaround:
you can apply some css to all .ok and then reset on all nested .ok
div {
margin: 5px;
padding: 5px;
border: 1px solid green;
background-color: #fff;
}
.ok {
background-color: gray;
}
.ok .ok{
background-color: #fff;
}
<div>
...
<div class="ok">
...
<div class="ok">
...
<div class="ok">
...
<div>
...
</div>
</div>
</div>
</div>
</div>
CSS provides no functionality to select an element based on anything that appears in the document after its start tag. Not descendants, not later siblings, and not later siblings of its ancestors.
You'd need to use JavaScript for this. Something along the lines of:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector(".ok").classList.add("ok-first");
});
I am coding a website for college coursework and I am writing it in DreamWeaver. When I go into design view it is all visible but when I view it in Safari or Chrome I can't see it at all. Please can you help me?
Please visit http://jsfiddle.net/NA6eN/ to see my code so far.
#wrapper
{
width: 90%;
margin: 0 auto;
color:#CCC;
}
#top_box
{
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
right: 5%;
background: white;
width: 80%;
border: 5px rgba(0, 239, 255, 0.5) solid;
border-top: none;
}
You have so many missing > objects, that's why the error. Fix your html and try again and it works fine, like this:
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
</html>
Fiddle
You didn't close the wrapper div:
<div id="wrapper"
should be
<div id="wrapper">
Missing to close >
DEMO
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
You didn't close your div's properly:
<div id="menu_box"
</div>
do it like this:
<div id="menu_box">
</div>
otherwise the browsers can't parse your html.
Fixed version: http://jsfiddle.net/Z2k8d/
You didnt end tag for div id wrapper
its
<div id="wrapper"
now change it to
<div id="wrapper">
Invaild in your HTML code : (HTML opening/closing tags)
Original :
<div id="wrapper"
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box" </div>
<div id="main_box" </div>
<div id="Bottom_box" </div>
</div>
Fix to :
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
Trick in jsFiddle
click on buttom for more readable
You see that code in red color ?, Its mean your HTML not vaild
Fix it ! like your is missing closing tag , closing tag with no opening tag... bla bla bla
Result :
Vaild !
Demo : http://jsfiddle.net/NA6eN/3/
Useful tool for you : http://validator.w3.org/#validate_by_input
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.