Given this html:
<div id="wrapper">
<div id="header-holder">
<div class="header">header 1</div>
<div class="header">header 2</div>
</div>
<div id="project">project data</div>
</div>
I want to apply a style to element in .header only if #project exists. I'd like to do this with css. Is this possible?
The trouble with cascading style sheets is they cascade. They go down layer by layer and don't come back up. If your structure were set where your <div id="project"> was above your <div id="header-holder"> you could use:
div#wrapper #project + #header-holder .header { ... }
However, if you are unable to restructure your HTML, then you'll need to use javascript. If you have access to jQuery you could try the following:
$('#wrapper:has(#project) .header').addClass("has_project");
Then in CSS:
.header.has_project{ ... }
Related
TL;DR:
Is it possible for css to ignore html element, but not its children?
Such element would be treated by css as if it wasn't there; but its children would be treated normally, i.e. as children of parent of the ignored element.
Details, Motivation:
Let's say we have a nice styled layout, e.g. with display: flex.
<div className="outer"><!-- this one has display: flex (just example) -->
<div className="inner">Foo</div>
<div className="inner">Bar</div>
<div className="inner">Baz</div>
<div className="inner">Foo 2</div>
<div className="inner">Bar 2</div>
<div className="inner">Baz 2</div>
</div>
But then, we need to wrap one group of our inner elements into form, or nav (for semantic or other reasons):
<div className="outer">
<div className="inner">Foo</div>
<div className="inner">Bar</div>
<div className="inner">Baz</div>
<form>
<div className="inner">Foo 2</div>
<div className="inner">Bar 2</div>
<div className="inner">Baz 2</div>
</form>
</div>
Well, of course this breaks our desired layout (e.g. flex), because <form> became the child of outer, and sibling of the first three inners.
Is it possible to make an element, in this case form, to be ignored by css - as if it wasn't there in the html element tree?
If it's not possible, has this feature ever been considered, worked on, rejected... ?
That's exactly what display:contents is designed to do. So:
form { display:contents }
.outer {
display: flex;
justify-content: space-evenly;
}
form {
display: contents;
}
<div class="outer">
<div class="inner">Foo</div>
<div class="inner">Bar</div>
<div class="inner">Baz</div>
<form>
<div class="inner">Foo 2</div>
<div class="inner">Bar 2</div>
<div class="inner">Baz 2</div>
</form>
</div>
just set the form to display: flex
now the form is a direct child... so you can for example set it to flex:1 or so.
and you will get a new "parent" for the form child elements.
I have some markup that looks like this:
<section id="accreditation">
<div class="container">
<div class="row"></div>
<div class="row-accreditation">
<div class="col-md-4">
<img>
</div>
<div class="row"></div>
<div class="row-accreditation">
<div class="col-md-4">
<img>
</div>
</div>
</div>
</section>
How can I select the img in the first .row-accreditation div? I've tried using first-of-type and first-child selectors but both do the same thing which is selecting both of the images. I also tried to recreate the accepted answer from this thread like so...
#accreditation div.row accreditation > img ~ img {blah}
...but without success.
Is this possible with css, and if so what is the best way to do it?
It does work this way in your particular example:
.row-accreditation:nth-child(2) > div > img {
...
}
http://codepen.io/anon/pen/wzWwxK
But I don't know if the HTML structure will stay the same in your application.
How can I style the numbers in the following HTML code independently of each other?
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
You can add ids or another class to each the divs and style those independently.
Well, you have two options. You could add styling attributes to each of the numbers by adding this style="color:red", so that the line will look like this <div class="col-xs-4" style="color:red">. This would turn the color of the text to red. Or you could make a .CSS document and style it by adding id's to each of the div elements like this, id="firstLine" and then putting this in the .CSS document, #firstLine{color:red;}. the # character is used for styling elements by id's and the . character is used to style the elements by class. The .CSS document is the recommended method of styling as it keeps code split up and looking nice and tidy.
This might help you:
UPDATE with Demo
.col-xs-4:nth-child(1)
{
color:red;
}
.col-xs-4:nth-child(2)
{
color:green;
}
.col-xs-4:nth-child(3)
{
color:blue;
}
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
I would like to build a sort of "stack" of divs (with class .inner) within a containing div (#container) where each inner is pushed as far down in the container as possible without overlapping another inner. I've included illustrations of what this would look like with one and three inners, respectively:
I know I could get the result on the left by setting...
#container { position: relative; }
.inner {
position: absolute;
bottom: 0;
}
...but this solution would not scale to the example on the right - instead it would cause all of the inners to overlap one another. Is there any good way to accomplish what I want through CSS alone for an arbitrary number of inners? I know I could do it with some hacky Javascript.
You could use an additional container for the inner containers and use the trick you suggested.
<style>
div{border:1px solid red}
#container{height:1000px;}
#inner-container{position:absolute;bottom:0px;}
.inner {height:200px;width:200px;margin:5px;;
</style>
<div id="container">
<div id="inner-container">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
Depends on what browsers you need to support. But a much cleaner solution would be to try mimicking some table layout in CSS.
I've not had a chance to thoroughly test this with IE8+, but most modern browsers can handle CSS table layout properties which would allow you to do something like this relatively easily.
So...
CSS
.container { display: table-cell; vertical-align: bottom; height: 400px}
HTML
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
The only caveat is that if you have two of these "container" divs following each other in the code, than they will behave like table-cells (TDs) and sit next to each other.
If you want to stack them, then you can get around this by wrapping the containers in a div without the table-cell style, or sticking another element inbetween... e.g.
<div>
<div class"container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
<div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
OR...
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
<div></div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
I have the following html structure
<div id="content">
<div id="transport">
<div id="header">Header Text</div>
<div id="image"></div>
<div id="right_content">Lots of text</div>
</div>
</div>
Is there a better way to arrange the css for the above rather than use ids for all of the divs?
IDs can only be used once in a document. Classes can be reused throughout the document. Styles attached to IDs trump styles attached to classes.
Other than that, it's entirely up to you and the particular content you are marking up.
Looking at your sample code, I would recommend using an actual header tag instead of a div with an ID of header.
Why not change those to classes and have only the top level container with an ID? That way you can target it with the top level ID.
You should also remove the header DIV and use a H2 or H3 tag.
<div id="content">
<div class="transport">
<h2>Header</h2>
<div class="image"></div>
<div class="right_content">Lots of text</div>
</div>
</div>
Your CSS would look like
#content .transport {}
#content h2 {}
#content .image