I am trying to extract the nth child of an element, so that elements appear stacked within the same container.
I've tried reading over https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child, but to no avail.
I recreated the problem in a jsfiddle,
https://jsfiddle.net/ndga732y/
html:
<table>
<td>
<p id="image-1">first content</p>
<p id="image-2">second content</p>
</td>
</table>
css:
p:nth-child(0n){
offset-x: n*2px;
offset-y: n*2px;
}
I understand that selecting the nth child is easy, using the nth-child selector, but how do I use the n-value to create a different offset, depending on its order in a container?
Thanks in advance!
This isn't possible with plain CSS unfortunately.
You can use Javascript or a CSS preprocessor (probably a postprocessor as well?).
Here is how I would approach it with Sass, which would compile to CSS:
#for $i from 1 through 2 {
p:nth-child(#{$i}) {
top: $i * 100px;
left: $i * 50px;
position: relative;
}
}
and here's a quick demo: http://www.sassmeister.com/gist/8af65851d1c404be698f
You could use padding left and do something like
p:nth-child(2){
padding-left: 50px;
}
Related
I have design this box with angular material. I can not break these two words in two line(up and down).i have included a image. Here i want 1349 and New Feedback in two line. I am new in angular material. thanks
<style>
.box-item {
background-color: cornflowerblue;
width: 100px;
height: 120px;
}
.box-text {
color:white;
}
</style>
<div layout="row" style="padding: 32px;" ng-cloak>
<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}"
flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout
layout-align="end center" layout-margin>
<span class="md-display-1 box-text">1349</span>
<span class="box-text">New Feedbacks</span>
</md-whiteframe>
</div>
That is a css question.
You want to order 2 inline elements (span) in 2 lines.
You should try to style one of them as block element or to add br tag between them.
<style>
.box-item {
display: inline-block;
background-color: cornflowerblue;
height: 120px;
}
.box-text {
color:white;
display: block;
}
</style>
Example Here
That's because the <span> tag is an inline element by default and only takes up as much width as necessary.
If you need to use a span and require the item's on separate lines then either change the behaviour of the element through CSS by changing it's display property to block as stated by Cuzi, add a single line break between the elements using the <br> tag or use a block-level element such as the <div> tag.
I recommend using the right element for the job. So a block-level tag like the <div> tag would be ideal. This would cause both elements to take up the full width available and thus be on separate lines without the requirement for an extra line of css, (plus you save a byte of space per element within the HTML!
Heres how to do it in CSS.
.box-text {
color:white;
display: block;
}
Heres with a <br> tag:
<span class="md-display-1 box-text">1349</span>
<br>
<span class="box-text">New Feedbacks</span>
And the simplest and most semantic of the three, with div tags:
<div class="md-display-1 box-text">1349</div>
<div class="box-text">New Feedbacks</div>
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I am building a website using singularity.gs which I am fairly new to.
I am having trouble giving a div a background-color, this is my html structure:
http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
</div>
To achieve this affect is had to set a height for the div:
#include breakpoint(70em) {
.about {
height: 340px; //This property will set the height of the div
}
.about .photo {
padding: 1em;
#include grid-span(2, 4);
}
.about .text {
padding-top: 7em;
padding-left: 1em;
display: inline;
#include grid-span(4, 6);
}}
If I remove the "height:340px" no background will be drawn:
http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)
Is there a way to let the div wrap its height around its content (.photo,.text)?
Note: if i remove #include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality
Thanks in advance!
Don't span the container.
The problem you experience happens because Singularity columns are floated, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both; rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after pseudo element that appears at the end of an element's contents. Using :after is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
#import 'toolkit';
.about { #extend %toolkit-micro; }
The %toolkit-micro extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy extendable that works even in ancient browsers.
I fixed it.
Forgot to add an #include grid-span(12, 1); for my .about
Is there a way to choose the second inner div without changing the HTML using CSS 2 cross-browser support?
<div>
<table>
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
</table>
</div>
$("div div:nth-child(2)").css ( "CSS GOES HERE" ); // index starts from 1
$("div div:eq(1)").css ( "CSS GOES HERE" );; // index starts from 0
This will work in all browsers regardless of the fact browser supports css3 or not.
EDIT
As mentioned the above code will work even if the browser supports only css2 , but if it is only for puzzle then
div div:first-child + div
This will affect only second div inside main div without use of css3. [ first-child is not css3 ]
try this selectors, any will work fine:
div table div { ... }
or
div table tr td div { ... }
you could use an adjacency selector
div + div
http://jsfiddle.net/kudoslabs/rysys/
reference: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
Try to use this selector
div div + div {
…
}
Demo on dabblet.com
I achieve this result with these css rules:
div {
padding: 5px;
background: yellow;
}
div div + div {
background: red;
}
if you are trying to find inner div using jquery selector then here is code that might help
var innerDiv = $('table').find('div');
and for outer
var outerDiv = $('table').parents('div');
regards.