I have a class .entry-content that has 30px of margin on every page, and I have a class .double-outter-wrapper that is the first-child, but is only on 1 or 2 pages. Is there a way to target only the pages that have .entry-content and .double-outter-wrapper to change the margin to 0?
JavaScript may be a viable solution if you're willing to use it... if you include a common JavaScript GUI controller in each of your pages you can definitely handle this... it's as simple as...
if (document.getElementsByClassName('your-conditional-element').length !== 0) {
document.getElementsByClassName('your-element')[0].style.margin = 0;
}
With Jquery want to achieve the same. So here class one has a background color red. And in the two cases, it has a class two. So selecting the class two and checking for its parent one and changing its CSS to green. You can add CSS as per your need like margin:0
Here is an example
$(".two").parent(".one").css("background","green");
.one {
background:red;
width:90%;
height:20%;
margin:30px;
padding:20px;
}
.two {
background:blue;
width:100%;
height:100%;
}
.three {
background:orange;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<div class="two three">
class 1
</div>
<div class="three">
</div>
</div>
<div class="one">
<div class="two three">
</div>
<div class="three">
</div>
</div>
<div class="one">
<div class="three">
</div>
</div>
<div class="one">
<div class="three">
</div>
</div>
Related
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box
I'm trying to grey out the tags (success and recommended on the last 2 boxes) and have them colored only when they are hovered over or active (the first box).
I'm using the gray colour as a disabled state although its just styled gray using css.
I'm trying to do this in in pure CSS using SASS and not using css fitler as I need to target IE browsers.
Could I create a mixin or a true or false statement in SASS to unset a class that is gray to show the colour in its hovered or active state on the parent or something?
The tags are bootstrap.
<div class="row">
<div class="col-md-3">
<div class="sau-select selected">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<div class="tag tag-success">Success</div>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select error">
<div class="header">
<h4>Self Managed</h4>
<p> </p>
</div>
<div class="main">
<span> </span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-warning">Recommened</span>
<p><i class="fa fa-plus" aria-hidden="true"></i> $399.00</p>
</div>
</div>
</div><!-- /col-md-3 -->
<div class="col-md-3">
<div class="sau-select">
<div class="header">
<h4>Self Managed</h4>
<p>label</p>
</div>
<div class="main">
<span class="tag tag-success">Success</span>
<p>Included</p>
</div>
</div>
</div><!-- /col-md-3 -->
</div><!-- /row -->
SASS
.sau-select {
border: 2px solid $sau-gray-mid;
float:left;
width:100%;
text-align:center;
cursor:pointer;
.header{
background-color: $sau-gray-mid;
color:#fff;
padding:7px 0 7px 0;
h4{
font-size:1.1rem;
}
p{
font-size:0.8rem;
padding:0;
margin:-7px 0 0 0;
line-height:18px;
}
}
.main{
color:$sau-gray-mid;
padding:4px 0 15px 0;
p{
padding:0;
margin:0;
}
}
&:hover, &.selected{
border: 2px solid $sau-blue;
.header{
background-color: $sau-blue;
}
.main{
color:$sau-blue;
}
}
&.error{
border: 2px solid $brand-danger;
.header{
background-color: $brand-danger;
}
.main{
color:$brand-danger;
}
}
}
If I've read your question correctly, I think you may have a slightly wrong idea of what SASS does. I'll attempt to answer as best I can;
SASS is simply a sugar layer, no matter what function or mix-in you have in a sass file, it always ends up being compiled and being a .css file, Its ability to effect the browser is 100% limited to the exact standards of css, so if css can do it, it is possible, if css can't, sass will not help you.
So with this in mind, having color change on hover is no problem, and your code appears to suggest that you have already achieved this.
As for the selected color, there simply is no way around it, you must add the .selected class to the HTML. This will obviously trigger the color change from the associated class.
Hopefully my answer helps you.
Alright so I'm trying to format all these different items to have the same color instead of having to change them all separately. I'm following all the examples I can find on the internet but for some reason it isn't working. Please no salt when answering my question either, I'm just trying to find some help on finding this error.
HTML:
<body>
<div id="header"></div>
<div id="links"></div>
<div id="main"></div>
<div id="pictures"></div>
<div id="footer"></div>
</body>
CSS:
body, #header, #links, #main, #pictures, #footer{
background-color:#cbebf6;
}
Style is ok, elements are empty - that's probably why you don't see the results.
Besides that you should use classes for common styles instead of ids
I'm guessing you mean you want to have a unique css selector for all elements. For that you should use a class
CSS:
.red{
background-color:#cbebf6;
}
HTML:
<body>
<div id="header" class="red"></div>
<div id="links" class="red"></div>
<div id="main" class="red"></div>
<div id="pictures" class="red"></div>
<div id="footer" class="red"></div>
</body>
Do as Drew Kennedy Suggested. Apply the same class to all of them.
.bg-color {
border: solid 1px black;
background-color: #cbebf6;;
}
#header, #links, #main, #pictures, #footer { /* Just for outline sake */
width: 200px;
height: 200px;
margin: 10px;
}
<body class="bg-color">
<div id="header" class="bg-color"></div>
<div id="links" class="bg-color"></div>
<div id="main" class="bg-color"></div>
<div id="pictures" class="bg-color"></div>
<div id="footer" class="bg-color"></div>
</body>
Why images appear in such manner , .. ?
<div id='container'>
<div class='imgContainer'>
<div class='myLocation'>
<img src='https://graph.facebook.com/1055505/picture' style='width:30px'>
Tova Schherr
</div>
</div>
<div class='imgContainer'>
<div class='myLocation'>
<img src='https://graph.facebook.com/1205050/picture' style='width:30px'>
Alison Carmel
</div>
</div>
..... ..
......
</div>
you must know that the data are sample to show the example, so it will not work.
here is CSS class for myLocation
.myLocation
{
margin-bottom:1px;
width:100%;
background-color:#F7F7F7;
color:#006699;
padding:7px;
padding-right:12px;
}
Maybe, your doctype require to close the image tag.
<img src="" />
Try to use fixed height on .imgContainer
.imgContainer {
height:80px;
vertical-align:middle;
}
I got a little problem and nothing I test seems to work.
My HTML:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
CSS:
#top_parent {
background:#f00;
height:100px;
}
#top{
background:#0f0;
float:right;
position:relative;
height:100px;
width:50%;
}
#content{
top:-50px;
background:#00f;
<!-- position:relative;-->
height:100px;
width:80%;
margin:auto;
}
#parent{
background:#000;
height:350px;
width:100%;
}
#bottom {
height: 50px;
background:#ff0;
bottom:0px;
<!--position:absolute; -->
<!--position:relative; -->
}
Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?
jsF link: my source
Thanks for the help.
You have not closed this div:
<div id="content">Here comes random stuff<div>
Should be:
<div id="content">Here comes random stuff</div>
You could see this easily if you indented your divs:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>
Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:
<div id="content">Here comes random stuff<div>
Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.
I think you have a wrong html:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
You didn't close div parent, nor content
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
<div id="bottom">Footer</div>
</div>
Interpreting that you want the "bottom" div inside the "parent", else:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
</div>
<div id="bottom">Footer</div>
Also, in your css you should enable the position:relative for #content div, else the top parameter won't work.
Try if this solves the problem.
In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::
<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>
For this example your css should be as following:::
div.wrapper{
width:80%;
position:relative;
margin:0 auto;
}
div.left{
float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/
}
div.right{
float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/
}
div.footer{
clear:both;
height:40px;/height only for testing so you could see the result/
background:yellow;
width:100%;
}
Have you tried taking out that "bottom" attribute in the #bottom rule?