For example, let's say my code looks like below.
Same from css all divs vs direct child divs but, need in SASS.
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
I want to put borders on the divs that contain ddddddd, and I want to set the text color on all divs to green.
There are two rules:
I can't add class attributes.
I have to write selectors that start with .Root.
Any Ideas?
It could be like this (SASS):
.Root
padding: 1em
color: green
> div:not(:nth-of-type(2))
border: 1px solid red
which compiles to:
.Root {
padding: 1em;
color: green;
}
.Root > div:not(:nth-of-type(2)) {
border: 1px solid red;
}
<div class="Root">
<div>ddddddd</div>
<div>
<div>pppppppppp</div>
<div>pppppppppp</div>
</div>
<div>ddddddd</div>
</div>
Also the last <div> should be </div>.
Related
I am having trouble with the styling of my webpage. I am using create-react-app repo for my react boilerplate and react-bootstrap repo for my react bootstrap.
Whenever I use a <p></p> in my page, it centers the text for me and I can't find any parent div that has this sort of styling for the paragraph in my code. Here's the code for the page.
class App extends Component {
render() {
return (
<div>
<div className="container">
<div className="col-lg-12">
<div className="col-lg-5">
<img className="img-responsive img-circle" src="http://placehold.it/120x120" alt=""/><br />
<h3 className="lead text-justify text-white">
Gulshan Jubaed Prince<br />
<span>Partner, Techynaf</span>
</h3>
<p>Test paragraph.</p>
</div>
<div className="col-lg-7"></div>
<div className="col-lg-3">
<div className="well"></div>
</div>
</div>
</div>
</div>
);
}
And here's the output on the web browser. I have added box borders in my style sheet for debugging purposes.
.container - white box
h3 - yellow box
h3 span - green box
h3 + p - red box
Note that the paragraph (enclosed in red border) is displayed outside of the .container div (enclosed with white box) even though the .container is containing the <p></p> tags.
And here's the styling for the box borders (might not be important for the question):
h3 span{
font-size: 17px;
font-weight:lighter;
color: #CCC;
font-style: italic;
border: 1px solid green;
}
.container{
border: 2px solid white;
}
h3 {
border: 1px solid yellow;
}
h3 + p {
border: 1px solid red;
}
I want the Test Paragraph to be inside the .container div and right underneath the text Parter Techynaf
Please include
clear:both;
float:left;
in your css
Please try this:
.container{
overflow:hidden;
}
I'm doing some formatting on a webpage and I'm wondering if it's possible to save a chunk of html code as a class and reuse it.
For example:
I want to change this -
<div>
<hr>
<p>Item 1</p>
<a href="oh.jpg" />
<hr>
</div>
<div>
<hr>
<p>Apple</p>
<hr>
</div>
To this -
<div class="section">
<p>Item 1</p>
<a href="oh.jpg" />
</div>
<div class="section">
<p>Apple</p>
</div>
With the same end result of being contained within two horizontal rules.
Is there a way of making a class that isn't just for styling but contains HTML code as well?
The closest thing to what you're describing is the CSS pseudo-elements :before and :after. You can't insert HTML, but you can insert text or images, or a simple rectangle with content:"";display:block;. With some creativity you can pull off a lot of effects with just CSS.
So while you can't insert an actual <hr> with CSS, you can psuedo-elements to draw one with whatever styles you please:
.section:before {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
.section:after {
content: "";
display: block;
height: 2px;
border: 1px inset #000;
border-width:1px 1px 0 0;
}
If you absolutely need to add HTML, you can use Javascript to find all elements with class .section and append child elements.
you can use CSS
.section{
width : 100%;
border-bottom: 2px solid #ccc;
margin-top : 5px;
}
I have this html code:
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>
<div class="clear"></div>
<div class="productLine" ></div>
</div>
css:
.productWarp .productLine {
background-color: #DFDDDD;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
.productWarp .productLine:nth-of-type(2)
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
This choosing the second child of productWarp(first productLine) and not the second productLine,so it acting Exactly as nth-child selector
<div class="productWarp">
<div class="clear"></div>
<div class="productLine" ></div>//this one is choose
<div class="clear"></div>
<div class="productLine" ></div>//this one should be choose
</div>
any idea what wrong here?
:nth-of-type() looks at an element's type, not its class. In this case, all your elements are of the type div, which is why :nth-of-type() works exactly the same as :nth-child().
If you have only two .productLine elements, use the following selector to style your second one instead:
.productWarp .productLine ~ .productLine
{
background-color: white;
border-bottom: 1px solid #B7B7B7;
padding-right: 5px;
}
Otherwise you'll just have to go by :nth-child() indices, in this case :nth-child(4), or override styles for subsequent .productLine elements by adding more rules repeating the ~ .productLine part as necessary.
This take in consideration the clearing div.
.productWarp div.productLine:nth-of-type(4n)
I have two css styles, the second of which I only want to take effect when the first is present. How would I go about that? I know that you can add more than one class to a class tag, but it doesn't seem to work to nest the css tags the same way.
.stat{float: left; width: 200px; height: 40px; padding: 5px; margin: 5px; border: 1px solid #000;}
.stat .red{background-color: #c00;}
<!-- This should have the background color -->
<div class="stat red">
<!-- This should not have the background color -->
<div class="red">
<!-- This should not have the background color -->
<div class="stat">
just leave out the space:
.stat.red{background-color: #c00;}
Just for clarification
.stat .red { ... }
or more precisely the " " between the classnames, is called a descendant selector. In your case it means that only elements with class "red", that are descendants of elements with class "stat" will be targeted. e.g.
<div class="stat">
<div class="red"></div>
</div>
Example:
<style> div.Style1 div img { border: 3px red solid } </style>
...
<div class="Style1" id="divMain">
<img src="http://someurl.com/someimg.jpg" /> <!--WON'T be styled-->
<div id="divSub">
<img src="http://someurl.com/someimg.jpg" /> <!--WILL be styled-->
</div> <!--End of divSub-->
</div> <!--End of divMain-->
Yes. This CSS:
div.Style1 div img {
border: 3px red solid;
}
says: apply border: 3px red solid; to all img elements within a div element, which are in turn in in another div that has Style1 as a class.
Here's a jsfiddle to demonstrate:
http://jsfiddle.net/WZ3rk/
Try this, it selects only images that are children of a div that are themselves children of the element with class Style1.
.Style1 > div > img {
border: 3px red solid
}
Yes, it is possible - try it out. Although I would use
div.Style1 div.divSub img { ... }