Let's say I have this HTML page:
<body>
<p id="alice">Alice</p>
<p id="bob">Bob</p>
</body>
and this pretend CSS syntax:
p#alice:before { p#bob }
In other words, I want to override the HTML using CSS, placing the Bob element ABOVE the Alice element. Why? Because in my case I can edit the CSS, and I cannot edit the HTML.
Bob doesn't have to actually occur before Alice in the DOM, but it does need to appear ABOVE Alice visually.
The only way to do this with pure CSS that is completely flexible is with flexbox.
http://jsfiddle.net/S9L3r/ (prefixes not included)
body {
display: flex;
flex-flow: column nowrap;
}
#alice {
order: 2;
}
http://caniuse.com/#feat=flexbox
You can always do this with jQuery if you are able to add the code.
$('#bob').insertBefore('#alice');
Thats easy but ugly and you shouldnt do it.
However here is how to do it:
http://jsbin.com/azevet/2/edit
<div class="first-in-dom">
Im first in DOM
</div>
<div class="second-in-dom">
Im second in DOM
</div>
div {
height:100px;
border:solid;
}
.first-in-dom, .second-in-dom {
position:relative;
}
.first-in-dom {
margin-bottom:-100px;
top:110px;
}
Related
I have markup that goes something like this
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
I want to display a header containing, amongst other things, a logo above the first, body, container. This I accomplished by defining
.container::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
The above works. The problem is that the logo ends up not onlyu above the body content but also above the footer content which is not quite the desired result. I have played around with various combinations of
.container::before:nth-of-child(1)
{
}
.container:nth-of-child(1)::before
{
}
but I haven't quite found the right syntax to target the ::before pseudo element for the first .container instance. I hope that someone here will be able to tell me how it should be done.
If the worst comes to the worst I can do it with a spot of jQuery but I would like to avoid that.
Would you consider using <main> W3 4.4.14 The main element and <footer> 4.4.9 The footer element per HTML5 elements with class of .container on each? That way you can reference/target those elements without psuedo elements
main::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
This way the header/logo you are looking for would only appear above the first container only. Then if you need to apply pseudo elements to <footer> you could do something like:
footer::before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
OK so I'll add another answer because it doesn't appear that anyone has solved all of your issues.
First, there is a typo in your css: background-image(url(path/to/image.jpg) is missing the closing paren.
To do what you want, however, there is a simple css selector :). In your example, you try nth-to-child(), but the correct syntax for what you want is nth-child(). Look below for two options, with a working demo.
.container:first-child:before
{
display: block;
content: "Before Element";
/* other styling that you choose*/
}
/* the following selector will also work
.container:nth-child(1):before
{
display: block;
content: "Before Element";
}
*/
<div class='wrap'>
<div class='container'>
Body Container content
</div>
<div class='container'>
Footer Container content
</div>
</div>
Note that the display: block; part is so that the before content appears on it's own line, since :before elements by default are display: inline-block;.
I dont think that there is a way to making it work with nth-of-child, but it will definitely work with first-child (if you always need it only in the first element with class .container):
.container:first-child:before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
My first thought here is that there should be an additional class for the header, or use the <header> and <footer> elements in place of divs. For example:
<div class="wrap">
<div class="container header">
Header
</div>
<div class="container footer">
Footer
</div>
</div>
and
.header::before {
// stuff to make your logo
}
However, if for some reason you can't change the html, then the :first-child selector should work for your needs, as others have answered.
If you want to use nth-child() you need to add it to the parent of the element that you want to select. In this case .wrap.
.wrap:nth-child(1):before
{
background-image(url(path/to/image.jpg);
background-size:cover;
content:'';
}
as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.
my html
<a href="http://google.com" target="_blank">
<div> </div>
</a>
my css
div {
background:#f00;
height:100px;
margin-left:10px;
width:300px;
}
a {background:blue;}
the link actually works, but i see no blue background and chrome says that my a have no height and width
changing the css of the a to display:inline-block does the trick here, but not in my website.
do you have any suggestion or solution? how come the a element doesn't "follow" its child?
thank you!
http://jsfiddle.net/72cYy/82/
it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:
a {
display: block;
background:blue
}
EXAMPLE 1
or you could set it to display: inline-block to make it behave like it natrually would:
a {
display: inline-block;
background:blue
}
EXAMPLE 2
There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:
a#wrapper{
display: inline-block;
}
or
a.wrapper{
display: inline-block;
}
For more information on collapsed elements, you can check out this SO answer
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
This is HTML.
<div class="container">
<div> background of this i need in white </div>
<div> background of this i need in red </div>
<div> background of this i need in white </div>
<div> background of this i need in red </div>
</div>
I want to select alternate div without adding class or id .
Is it possible with CSS only (no Javascript) with IE 7 support
IE7 doesn't support the selector you would require, which is :nth-child().
Generally you would use
.container div:nth-child(even) {
background: red;
}
IE7 does not support it, unfortunately.
You will need to use JavaScript, or add a class to every odd or even row (perhaps using a server side language).
can't we select every second div inside <div class="container"> [with the CSS2 selectors introduced by IE7]?
Well kind of, with the adjacency selector:
.container div { background: white; }
.container div+div { background: red; }
.container div+div+div { background: white; }
.container div+div+div+div { background: red; }
But that means writing out a rule (of increasingly unwieldy length) for each child. The above covers the example markup with four children, so it's manageable for short, fixed-number-of-children elements, but impractical for elements with a large or unlimited number of children.
This cannot be done.
Use in-line style tags, like,
the following works in IE 7
not tested for others.
<div style="background-color:#ffff00" > Hello YOU div</div>
div:nth-child(odd) { background-color:#ffffff; }
div:nth-child(even) { background-color:#ff0000; }
but i don't know (and can't test) if this works in IE7 - if not, you'll have to use different classes for the divs.
Is it possible to make a div invisible without commenting it out? If so, how?
You need to hide that with CSS:
div { /* this will hide all divs on the page */
display:none;
}
If it is a particular div with certain class or id, you can hide it like:
<div class="div_class_name">Some Content</div>
CSS:
div.div_class_name { /* this will hide div with class div_class_name */
display:none;
}
Or
<div id="div_id_name">Some Content</div>
CSS:
div#div_id_name { /* this will hide div with id div_id_name */
display:none;
}
Note: You need to wrap CSS tyles in between <style type="text/css"></style> tags, example:
<style type="text/css">
div#div_id_name {
display:none;
}
</style>
More Information :)
You can do this by inline style
<div style="display:none"></div>
or by defining CSS Style like
In css add
.HideableDiv{display:none;}
and in your HTML write
<div class="HideableDiv" ></div>
Its Easy. The only thing you need is, adding a style to it, like following example shows:
CSS:
<style type="text/css">
div.myInvisibleDiv {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
</style>
HTML:
<div class="myInvisibleDiv"><p>My invisible content</p></div>
This div, and it content does definitely not show, and it wont disturb surrounding elements.
if you want it to be essentially gone from your layout:
.element_class {
display:none;
}
if you want to just make it invisible (but still keeping it's space seemingly empty)
.element_class {
visibility: hidden;
}
and then your element (if a div) would look like this:
<div class="element_class"></div>
basically anything you add the class="element_class" to will be either invisible or completely hidden.
position: absolute;
left: -99999px; /* big number */
will make the content accessible to most screen readers but will render the element off-screen.
May be, its not the required solution, but you can tackle this kind of issues by these little tricks.
You can use jQuery to achieve the solution.
If you want to totally hide/show the div, then you can use:
$('#my_element').show()
$('#my_element').hide()
Or if you want that your div become invisible and its still existing in the page, then you can use efficient trick:
$('#my_element').css('opacity', '0.0'); // invisible Maximum
$('#my_element').css('opacity', '1.0'); // visible maximum