CSS pseudo-classes - html

I have a problem, maybe it's obvious, but I couldn't find any answers how to do this.
I have a structure like this on my website:
<div class="row-even">
<article class="featured-job">a</article>
</div>
<div class="row-odd">
<article class="featured-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">a</article>
</div>
<div class="row-odd">
<article class="regular-job">b</article>
</div>
<div class="row-even">
<article class="regular-job">c</article>
</div>
This tiny thing is generated by PHP for listing some articles from two types, a Featured job, and a Regular job. I want to separate these two content types by adding a margin-top for the first one of the .regular-job articles. I tried using first-line, first-child, first-of-type, all from the first-* and even tried nth-child, but nothing worked for me.
(I know these separators working on the parent of the element I am using on.)
Is there any way it can be done?

The problem with first-child and regular-job is that the articles are not directly in the same parent because they are nested in row-even & row-odd. You either could wrap the regular-job rows in another div which gets the margin applied or add another class to the first row containing a regular-job. You could even add a class directly to the first regular-job.
I don't know how you PHP loop looks like, but maybe try to use a counter for that matter.
If needed I will gladly provide an HTMl/CSS example!

You would probably want to do someting like that:
div:first-child .regular-job {
margin-top: 20px;
}
You select the first parent element that has the child of .featured-job.
PS. Be careful where you are applying the margin, it won't work on inline elements or if you want to separate the parent elements then applying it to the article is not a good idea.

As Sven says, the problem is that you need the elements to be siblings for this selectors to work.
Set a class in the parent, matching the one of the child:
HTML
<div class="row-even featured-father">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured-father">
<article class="featured-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular-father">
<article class="regular-job">b</article>
</div>
<div class="row-even regular-father">
<article class="regular-job">c</article>
</div>
Then, it is easy to set the CSS. for instance:
.featured-father + .regular-father article {
background-color: red;
}
fiddle

while iterating in the PHP, add another dummy class with index.
Then it will be a piece of cake to make your custom class:
<div class="row-even featured_1">
<article class="featured-job">a</article>
</div>
<div class="row-odd featured_2">
<article class="featured-job">b</article>
</div>
<div class="row-even regular_1">
<article class="regular-job">a</article>
</div>
<div class="row-odd regular_2">
<article class="regular-job">b</article>
</div>
<div class="row-even regular_3">
<article class="regular-job">c</article>
</div>
notice the two introduced classes: featured_X and regular_X.
then:
.regular_1{
margin-top:50px;
}

Related

Bootstrap3: what is standard Structure and Layout?

There is a lot of tutorial about bootstrap elements.
But I want to know where I must use nav/header/container/row/well/panel/section
for example..Do it needs use row for column 12?
1- currently I do it this way:
<body>
<div class="container-fluid"> /*only for top navbar*/
<nav>
</div>
<div class="container"> /* for body */
<header></header>
<main class="row">
<div class="col-md-2"></div>
<div class="col-md-5"></div>
<div class="col-md-5"></div>
</main>
<footer class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</footer>
</div>
</body>
Is it true?
2- Is this format true or necessary?
<div class="row">
<div class="col-md-12"></div>
</div>
3- which one is standard?
<div class ="well">
<div class="row"> <div class="col-md-*"></div> </div>
</div>
or
<div class ="row">
<div class="well"> <div class="col-md-*"></div> </div>
</div>
4- dose it need use "container" class for all section or only for parent section?
for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".
for 2:- this is true. method also accessory.
for 3:- first option is correct.
for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.
All options you mentioned are correct.
However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/
But I want to know where I must use nav/header/section/footer
Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.
There are many informations to this in the web, here is a reference
All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.
Here you want to use multiple containers and not one for everything (Fiddle)
Hope this helps you a bit.

nth-child, change style of every other div with class name

I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]

Tumblr 1st post different style using nth or first child

I'd like to know exactly which element on my HTML to implement nth-child or first-child property so that the first post has a different style. A grid usually seen in many blogs. I found this same question here in SO. But since my html elements are different, I can't seem to make it work.
I tried using:
#content #posts:first-child {...}
But it doesn't work. Knowing Tumblr's limitations, I'm not sure if there's a workaround for this. Anyhow, here is my html:
<div id="content">
<div id="posts">
{block:Text}<!--textpost-->
{block:Title}
<h1 class="title">
{Title}
</h1>
{/block:Title}
<div class="text">{Body}</div>
{block:More}
<div class='rmlink'>Read more</div>
{/block:More}
{/block:Text}<!--textpost-->
{block:Photo}<!--photopost-->
<h1 id="ribbon">
Photo of the day
</h1>
{LinkOpenTag}
<div id="photopost">
<img src="{PhotoURL-HighRes}"/></div>
{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{block:More}
<div class='rmlink'>
Read more
</div>
{/block:More}
{/block:Caption}
{/block:Photo}<!--photopost-->
</div><!--posts-->
</div><!--content-->
You need a wrapper around each post type. The usual markup I have seen is a div or article with the class post. That will allow you to target nth children. So Inside each post type block {block:Text} you need to wrap the content in a wrapper that has the same class.
Then you can write some css like this:
#posts .post {
color:black;
}
#posts .post:first-child {
color:#CCCCCC;
}
See my fiddle here: http://jsfiddle.net/4fsh7rvr/
The #posts element will always be an only child as it has an ID which is unique.

Selecting alternate divs

I have code sort of like this:
<div class="right_col">
<div class="right_box">
<div class="other_div">text</div>
text etc
</div>
<div class="right_box">
<div class="other_div">text</div>
text etc
</div>
<div class="right_box">
<div class="other_div">text</div>
<div class="anotherother_div">text</div>
text etc
</div>
<div class="right_box">
text etc
</div>
</div>
So a main div with other divs inside which may or may not contain additional divs.
What I want to do is style them so "right_box" has alternate background colours.
The problem is that I am selecting the interior divs/taking them into account when doing odd/even etc.
This is the CSS I've tried:
.right_col .right_col:nth-child(even) {background:red}
.right_col .right_col:nth-child(0n+1) {background:red}
Any ideas where I'm going wrong?
You should be using nth-of-type() rather then nth-child().
Here's an awesome article on CSS-Tricks by Chris Coyer which explains the difference between the two.

id vs class declarations in css

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