id vs class declarations in css - html

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

Related

How do I conditionally set a css style based on its children elements?

I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!

Verification of "div." and just "."

In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.

Selecting first instance of an element with css

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 to style a group of elements under the same div tag independent of each other?

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>

change parent style if has a specified children in css

I have an html element that can have either a child with id='slideshow'
<div id='content'>
<div id='slideshow'>
</div>
</div>
or a different child
<div id='content'>
<div id='other'>
</div>
</div>
I want to apply a style to #content only if it has a child #slideshow.
Is it possible?
Unfortunately this is not (yet?) possible in CSS alone. You can however do it with a couple of lines in jquery or almost any other javascript framework.