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.
Related
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.
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 am trying to make a CSS style for a website However in their HTML they do not use IDs for containers. Some of these containers have adverts, while others do not. I want to display:none the containers adverts. The adverts themselves have IDs, and so does the normal content.
This is what their HTML looks like:
<div id="wrapper">
<div class="container">
<div id="advert"> Advert </div>
</div>
<div class="container">
<div id="content"> Normal stuff </div>
</div>
<div class="container">
<div id="advert2"> Advert </div>
</div>
</div>
What you are referring to is selecting the ID's Parent in the DOM structure. You cannot do this with CSS at the moment but with CSS4 there should be a way to select a parent in the DOM. At the moment is is done with JQuery. To get the parent div for the 'advert' ID would be...
$( "#advert" ).parent().css( "display", "none" );
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;
}
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