CSS for elements following or preceding another element, not nested - html

I am using markdown to write my text, so I do not have control over the HTML elements. Therefore, this is given:
<h2>Headline</h2>
<p>A paragraph</p> // standard bottom-margin to next <p>
<p>Another paragraph</p> // double bottom-margin should apply here because the next element is h2
<h2>Another Headline</h2>
<p>And another paragraph</p> standard bottom-margin to next <p>
Is there a css-related approach --- or any at all --- to apply a larger margin between <p> and the next <h2> than between all the other <p> to <p> transitions?
I'd like to explicitly control those <p>s that come before a new <h2>, but not any other.
I'm using float so that a simple <h2> top-margin does not help.
This is what my site looks like:

How about the sibling selector?
h2+p {/*your styles here*/}
Reference: http://css-tricks.com/child-and-sibling-selectors/

Edit: As per your edit this isn't what you're looking for.
You can control the h2's instead, for instance:
h2:not(:first-child) {
margin-top: 10px;
}
This will create a margin of 10px above every h2 except the first.

h2:before {display:block;margin-top:20px;height:20px;content:"";background:#aaa;}
rough example http://jsfiddle.net/eHreL/

Related

Is it possible to combine more CSS combinators? [duplicate]

This question already has answers here:
CSS Selector for Adjacency
(2 answers)
Closed 7 years ago.
I am trying to select every first paragraph element that follows a header element (e.g. h2). However, due to wrapping in divs, I end up selecting several "first" paragraph elements. Is it possible to select only the paragraph element that follows with CSS combinators? My HTML is like this:
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
This CSS ends up selecting the first as well as what I intended to be fourth paragraph:
p:first-of-type{
text-indent: 0;
}
So I tried with CSS like this:
div * h2 + div * p:first-of-type{
text-indent: 0;
}
But it doesn't work. So is it even possible to combine the descendant selector with the general sibling selector like that?
div * h2 + div * p:first-of-type
That means:
A p which is the first p in its container and which is a descendant of any element which, in turn, is a descendant of a div, which is a sibling of an h2 which is (etc etc).
In your HTML, the div is not a sibling of the h2.
Your problem is that you first need to select the div which is the parent of the h2 and then chain the rest of your selector from there. This isn't possible because CSS doesn't have a parent selector.
You cannot select a childelement from another childelement when they are not siblings or conncted by a hirachy.
You can use this selector, it will select the paragraph you want, but only if your HTML structure stays like you defined it:
div:nth-of-type(2) > div > p:first-child
The best solution would be to give you elements classes and ids. It is best practice to use as less rules as possible in CSS. Rules make the page slower...
Can you edit the html? A couple more selectors could fix this.
<div class="mainContainer"> <!-- new div -->
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
</div> <!-- new div -->
Then with something like:
.mainContainer div:nth-of-type(2) p:first-child { /* css here */ }
You should be able to style just the first paragraph this way, by targeting the first paragraph inside the 2nd "sub" div.

Binding heading indent to paragraph

Is there a way to solve this problem using CSS or do I have to fix it on per-article basis by adding newlines? I have article structure:
<div>
<img style="float: left" src="image_src.jpg">
<h3>Heading #1</h3>
<p>Paragraph 1....</p>
<h3>Heading #2</h3>
<p>Paragraph 2....</p>
</div>
Now, the problem is that very often heading "catches" the image and has to be indented while it's paragraph appears below it. Here is an example:
Is there a way I can force heading to go below the image, following it's paragraph or do I have to add newlines manually whenever I have such a problem?
Sure, you can use the CSS nth-of-type selector to clear the float on all but the first h3 element.
h3:nth-of-type(n+2){
clear:left;
}
jsFiddle example

Adjust height between two span elements

I am trying to adjust vertical space between two span elements inside a div. I am trying to achieve half of what I am getting from <br/>.
line-height , vertical-align or margin-top.
None of it worked for me. Here is the jsfiddle
<span> elements are inline. You can't put block-level elements like <p> inside of inline elements.
Use <div>s instead of <span>s and your CSS will work just fine:
<div class="signupEmailBox">
<div class="tag"><p>test data goes here</p></div>
<div class="smallTextEmail">
<p>blah blah blah</p>
<p>some text goes here...</p>
<p>here some more text data</p>
<p>some more text</p>
</div>
</div>
​
There is a property named display affecting the application of margin among others. The value of this property defaults to inline for span elements. Therefore there is no margin applied.
Either use a element with another default value like a div box or change the value of the display property of your span elements. I suggest using inline-block because this preserves the text flow capabilities of the span element.
span
{
display:inline-block;
}

CSS modify only H2 tag above P tag

See the code below, I need to chnage the font-size of H2 tag within the second 'content-block', I can not modify the Div Tag or the h2 tag themselves directly, I can only modify the content below the h2 tags.
<div class="content-block">
<h2>Title here</h2>
<p>this is some text.</p>
</div>
<div class="content-block">
<h2>Modify This title only</h2>
<p>this is some more text.</p>
<style>## I can add CSS here ##</style>
</div>
Edit: I can not be sure how many 'content-block' divs will be above the one I want to modify, it chnages from page to page. (A shopping cart)
How is the possible?
Thanks.
.content-block + .content-block h2 {/* your css */}
Demo: http://dabblet.com/gist/4013393
+ is what we call Adjacent Sibling Selector.
Use CSS3 :nth-child() Selector hope it may solve your problem
check the Example Here: http://www.w3schools.com/cssref/sel_nth-child.asp

alternative to h1 element?

I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.