I have a div inside which there can be any tags.
For example p, span, h1, h4...etc
Few tags like p and h1 have default margins.
I want to write CSS which says
Select the first immediate child of div
For example if the div contained only p tags, I could've written something like -
div > p:first-child {
margin-top: 0;
}
But here the case is that instead of p, it can be anything. How can I do it?
Select the first immediate child of div.
Both of these will work.
div > :first-child {
margin-top: 0;
}
or
div > *:first-child {
margin-top: 0;
}
div > :first-child {
margin-top: 0;
}
Hope it will work for you !
Related
I need to style element by page-id. I use for it this:
.page-id-34 .gallery-columns-9 .gallery-item { }
It is possible to style the same, but in relation to all child of page id 34?
Use a wildcard to match all descendants of an element:
.page-id-34 * {
color: red;
}
If you want to style only direct div elements for example it would be
.page-id-34 > div {
color: red;
}
I just got to that. I use:
.parent-pageid-34 .gallery-columns-9 .gallery-item { }
and it works!
Thank you for your participation.
The only class that I am allowed to use is .servicebox
I've tried this:
.servicebox div > div > div:last-child{
padding: 0;
}
but it is selecting more div, not the last one.
Use :last-child on the second div
.servicebox div > div:last-child > div{
padding: 0;
}
How about by id:
#c951 { /*your css*/ }
I beleive
div.servicebox > div > div > div.csc-default
should work if your last div that your are interested has a unique class. If not then:
div.servicebox > div > div > div#c951
should work.
As the title says I have a p element and I want to text-indent the start of every paragraph apart the the first paragraph where I don't want any text-indent. How can I do this in css?
You can give your first paragraph a class and then can do the following:
p:not(.first){
text-indent:30px
}
Please refer to this link:https://jsfiddle.net/n5pjgev6/400/
Another option which wouldn't require adding any additional markup or classes to your page:
http://codepen.io/panchroma/pen/jyaOJL
p{
text-indent:20px;
}
body p:first-child{
text-indent:0;
}
Good luck!
You can do this simply by applying a text-indent property to your paragraphs as so:
p {
text-indent: 50px;
}
The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
Excerpt from CSS Tricks.
DEMO
p{
text-indent:40px
}
p:first-child{
text-indent:0;
}
CSS
p > span {
margin: 5px;
display: inline-block;
}
p > span:first-child {
text-indent: 25px;
}
JSFIDDLE
you can use this:
p:not(:first-child) {
text-indent:30px;
}
Say I have a bunch of P, LI, or DIV elements, with nothing between them. I want to control the vertical spacing between them, so they don't fit so tightly. But I don't want to add any space top and bottom, since that is handled by the parent element and I don't need more. Is there a simple way to do this that works for all block elements?
Say I've got something like this :
p {
margin: 5px 0;
}
and then
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
But I don't want 5px above p 1, or below p 4, since the div already has padding and I don't want to go messing with that. I just want the 10px between p 1 and p 2, p 2 and p 3, etc.
I'm sure I could do something kludgy (and I have many times), but am looking for something cleaner that I don't have to do a lot of special-casing for this common situation.
Use adjacent selectors
p + p { margin-top: 10px; }
Basically the concept is that, if a p comes after another p give 10px margin in between.
You usage is something similar to
p + p, li + li, div + div {
margin-top: 10px;
}
This can also be done using :last-child or :first-child
Here is an example:
p, li, div {
margin-bottom: 10px;
}
p:last-child, li:last-child, div:last-child {
margin-bottom: none;
}
You can use adjacent selectors. You can define like this:
p + p{
margin-top:0;
}
OR
p ~ p{
margin-top:0;
}
p, li, div {
margin-bottom: 10px;
}
#parentID {
margin-bottom: -10px;
}
p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }
That is, set a top margin of 10px for all p elements and other margins to zero, except for the first p element, for which you set even the top margin to zero.
This works more widely than many other approaches, which use contextual selectors that are not supported by old browsers. To get really maximal browser support, you would assign a class to the first p element in markup and use a class selector instead of p:first-child.
This is the simplest possible way, since CSS operates on elements, not on what’s between elements. So you need some way of distinguishing the first p element in a sequence of p elements.
Note that p { margin: 5px 0; } (mentioned in the question) would create vertical margins of 5px, not 10px, because adjacent vertical margins collapse.
Is it possible with CSS and the latest Chrome or Firefox to automatically remove the top margin from the first <h1> tag, or do I have still have to use jQuery?
You just need h1:first-child { margin-top: 0px; } DEMO
There's no :first-of-page selector so no, you can't use CSS for sure. No way in CSS to extract all h1 from a page whatever their parents and preceding siblings and only take the first one.
You need to know a little bit more about your h1 elements.
Examples:
you can select the first h1 if it's also the (first and or only) child of body > header (or #header in HTML 4.01)
if all h1 are siblings, then h1:first-of-type is the first one for sure
if the first h1 is right after your main nav in a section, then body > nav + section > h1 would select it. Or maybe body > header > nav + section > h1:first-of-type
div#content h1:first-child { margin-top:0; }
AFAIK This won't work in IE6 and may be buggy in IE7.
Pseudo selectors.
h1:first-child {
margin-top: 0;
}
Note that those aren't supported in Failbrowsers (IE 7 and previous), so you may still need a jQuery backup solution.
Add a class to the h1 tag, like:
<h1 class="first">Your text</h1>
Then in the css:
.first
{
margin-top: 0;
}