I am trying to style a series of divs, depending on their position. I want them to be styled, like so:
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
<div class="col33"></div> <!-- red -->
<div class="col33"></div>
<div class="col33"></div> <!-- orange -->
But I can only seem to get every third child:
.col33:nth-child(3n) {
background-color: orange;
}
http://jsfiddle.net/UAj6h/3/
Just add another rule for 3n+1 div
.col33:nth-child(3n) {
background-color: orange;
}
.col33:nth-child(3n+1) {
background-color: red;
}
Example fiddle: http://jsfiddle.net/UAj6h/4/
As a side note, you may avoid to use redundant .col33 class, in order to reduce markup size
and you may target those div with .parent-div > div
Just add .col33:nth-child(3n-2) or .col33:nth-child(3n+1) for your red divs.
.col33:nth-child(3n-2) {
background: #ff4136;
}
DEMO
Related
This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 3 months ago.
Can someone please point me to the CSS precedence rules regarding "concatenated classes" vs "separated classes"?
Also, what are the correct terms for "concatenated classes" vs "separated classes" (I suspect that's why I can't find the documentation I'm looking for.)
For example, in the CSS below, .row .second (with a space) appears to take precedence over .row.second (no space), even though they both match 2 class attributes.
.row {
width: 150px;
background-color: lightgray;
margin: 15px;
}
section {
margin-left: 15px;
}
.row .second {
color: purple;
}
.row.second {
color: orange;
}
When applied to the HTML below, the CSS above produces this result:
Why is "Stuff 2b" in purple instead of orange? (In other words, why does .row .second take precedence over .row.second in this case?)
<div id='outerBox'>
<div class="row">
<div class="title">
Row 1 Title
</div>
<section>
Stuff 1a
</section>
<section class='second'>
Stuff 1b
</section>
<section>
Stuff 1c
</section>
</div>
<div class="row second">
<div class="title">
Row 2 Title
</div>
<section>
Stuff 2a
</section>
<section class='second'>
Stuff 2b
</section>
<section>
Stuff 2c
</section>
</div>
<div class="row">
<div class="title">
Row 3 Title
</div>
<section>
Stuff 3a
</section>
<section class='second'>
Stuff 3b
</section>
<section>
Stuff 3c
</section>
</div>
</div>
(I'm applying the CSS above to the HTML below in JSFiddle in Chrome on MacOS.)
separated classes is using for Childs in css.
Example :
.row .red # Means red Childs in Row
{
color:red;
}
<tr class="row">
<td class="red">
<p>Hey!</p> ### Color of this P will be red.
</td>
</tr>
The color of the classnamed as "red" elements in ".row" will be red.
But concatenated classes using for like "with".
Lem me show a example;
.row.red # Means class="row red"
{
color:red;
}
<tr class="row">
<td class="red">
<p>Hey!</p> # Color of this P will not be red.
</td>
</tr>
<tr class="row red">
<td class="">
<p>Hey!</p> # But this one will be red.
</td>
</tr>
While most commonly used, classes have nothing to do with Object Orientation. This means that there is no OO mechanism to 'concatenate/separate' anything. It's pure a syntax for creating different kinds of CSS selectors. I always consider CSS definitions as an eleborate list of if-statements.
without space, .row.second: all .row elements that are also .second
with space, .row .second: all .row elements that have .second child elements in their list of child elements. Any nesting deep.
This also means that there is no specific precedence at play in your case.
You either select any second row element or any second child element of any row element.
I get the feeling that your confusion originates from the difference in notation in CSS and HTML tags:
<tag class="row second"> with space is not equal to.row .second { ... } also with space, but equal .row.second { ... } without space.
It literally means a <tag> that is both a .row and a .second.
With space in CSS litterally means select all parent tags that are .row and select all .second child tags of those parents.
Update
I forgot to mention (like #TemaniAfif did) that color is inherited from the parent, I assumed it to be known by OP.
snippet showing the various possibilities:
div>* {
background-color: lightgray;
margin: 15px;
}
/* the default for all */
.row, .default1 { color: purple }
.second, .default2 { color: orange }
/* exceptions in special cases */
.row.second, .exception1 { color: green }
.row .second, .exception2 { color: red }
<p><b>Legend:</b> explanation per parent class used and (rule that applies)</p>
<h3>no parent class</h3>
<div>
<div>no class, will be document default</div>
<div class="row">row, will be purple (default1)</div>
<div class="second">second, will be orange (default2)</div>
<div class="row second">row second, will be green (exception1)</div>
</div>
<h3>.row parent</h3>
<div class="row">
<div>no class, will be purple from parent (default1)</div>
<div class="row">row, will be purple, like parent (default1)</div>
<div class="second">second, will be red, because child of row (exception2)</div>
<div class="row second">row second, will be red, overrides parent (exception2)</div>
</div>
<h3>.second parent</h3>
<div class="second">
<div>no class, will be orange from parent (default2)</div>
<div class="row">row, will be purple, overrides parent (default1)</div>
<div class="second">second, will be orange, like parent (default2)</div>
<div class="row second">row second, will be green, overrides parent (exception1)</div>
</div>
<h3>.row .second parent</h3>
<div class="row second">
<div>no class, will be green from parent (exception1)</div>
<div class="row">row, will be purple, overrides parent (default1)</div>
<div class="second">second, will be red, because child of row (exception2)</div>
<div class="row second">row second, will be red, overrides parent (exception2)</div>
</div>
I have frequent bundling together of css classes like this:
<div class="row z-depth-2 gradient-background">
... Blah
</div>
I have these three classes: row z-depth-2 gradient-background used together in more than 200 places. How can I introduce a single class for these three taken together?
I don't mind CSS or SASS. One other problem is that row and z-depth-2 are defined in materialize.css which I don't wanna touch. So I can't simply extend these classes in SASS like so:
.input-group {
#extend .row, .z-depth-2, .gradient-background
}
So I want to be able to do something like this:
<div class="input-group">
... Blah
</div>
Why not simply use the three classes as one selector like this .row.z-depth-2.gradient-background. It will allow you to select elements that have these 3 classes (it can have more of course) :
div {
margin:10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {/* pay attention as there is no spaces between the classes*/
background: red;
}
<div class="row z-depth-2 gradient-background">
<!-- Select this one -->
</div>
<div class="row gradient-background">
</div>
<div class="row z-depth-2">
</div>
<div class="row gradient-background z-depth-2 more-class">
<!-- Select this one -->
</div>
Usefull links to get more details :
https://css-tricks.com/multiple-class-id-selectors/
Using two CSS classes on one element
UPDATE
If you want to use a new class that will later be replaced with these 3 ones, you can use a small jQuery script in order to do what you need, like this :
//select all element with class input-group
$('.input-group').each(function() {
$(this).removeClass('input-group'); //remove input-group
$(this).addClass('row z-depth-2 gradient-background'); //add the other classes
})
div {
margin: 10px;
height: 20px;
background: blue;
}
.row.z-depth-2.gradient-background {
/* pay attention as there is no spaces between the classes*/
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
</div>
<div class="class">
</div>
I have images in a slideshow on this page. I would like the square images to become circluar using css.
I am having a hard time using inspect element b/c the images are in a slideshow. Which class can I use to add border-radius to make the square image eg of the pasta salad/potatoes into a circle shape?
<div id="rev_slider_22_3_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:400px;">
<div id="rev_slider_22_3" class="rev_slider fullwidthabanner" style="display:none;max-height:400px;height:400px;">
<ul> <!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx.image.jpg" alt="challah-1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx/meatballs.jpg" alt="matza-balls" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
Use this:
.tp-simpleresponsive >ul li {
border-radius: 50%;
}
.rev_slider_wrapper {
background-color: transparent !important;
}
You can apply border radius 50% to your square image to make it circular.
.circular-image {
border-radius: 50%;
}
While the best way to accomplish this is to use:
.circular-image {
border-radius: 50%;
}
You need to be aware that in most cases, you need to apply a min-width, and min-height or else your result may not be as expected in some brosers/uses.
I need to display some text that alternates between one color and another. I've used CSS and <div style=""> to mark any text that should be a particular color:
<html>
<head>
<style type="text/css">
div {
.dark{ color: black }
.light{ color: blue }
}
</style>
</head>
<body>
<div style="dark">This</div><div style="light">text</div><div style="dark">should</div><div style="light">alternate</div><div style="dark">between</div><div style="light">light</div><div style="dark">and</div><div style="light">dark</div>.
</body>
</html>
When I open this in a Web browser, it only displays text in black. What do I need to fix to make this alternate the colors properly?
The HTML is wrong. dark/light are not styles, they should be classes in this instance.
jsFiddle example
Your HTML should be..
<div class="dark">This</div>
<div class="light">text</div>
<div class="dark">should</div>
<div class="light">alternate</div>
<div class="dark">between</div>
<div class="light">light</div>
<div class="dark">and</div>
<div class="light">dark</div>
If you wanted to achieve this via the style attribute, you would use the following:
jsFiddle example
<div style="color:blue">This</div>
<div style="color:black">text</div>
<div style="color:blue">should</div>
<div style="color:black">alternate</div>
<div style="color:blue">between</div>
<div style="color:black">light</div>
<div style="color:blue">and</div>
<div style="color:black">dark</div>
Classes are obviously the better way to achieve this though.
I am trying to figure out a way to have multiple background colors on a project i am working on. The design is made with 4 colors on the background. 1 for the header and content, 1 for the sidebar and 1 for each of the 2 footer sections.
Setting the background-color on those is easy as pie - the problem comes when i need to make the colors actually grow outside of the container (match the width of the browser) but still have a max-width of the container itself for 940px.
I am using Twitter Bootstrap 3 as the boilerplate for the project.
Any suggestions?
If background images are an option, then you could split your page into a top part and a bottom part, and then apply background images to those containers.
Your HTML would look like this:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div class="main-wrapper">
<div class="container">
<header class="header" role="banner">
…
</header>
<div class="row">
<section class="col-8" role="main">
…
</section>
<aside class="col-4" role="complementary">
…
</aside>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container">
…
</div>
</footer>
</body>
</html>
And then you would just create styles for your .main-wrapper and .footer that applies your tiling background image to them.
Create a new style sheet called application.css and load it after bootstrap.min.css, and place the following CSS rules in it:
.main-wrapper {
background: url(../img/main-bg.png) repeat-y 50% 0;
}
.footer {
background: url(../img/footer-bg.png) repeat-y 50% 0;
}