I'm trying to add a dropcap in my Wordpress site, to the first letter of the first paragraph following the H1. I'm using a selector as follows:
h1 + p:first-letter {
font-family:Almendra;
font-size:300%;
etc...
}
Nothing is being selected. If I remove the h1 +, every paragraph's first letter is selected.
My page is here: http://www.thelionscall.com/2012/10/19/forum-testing/
What am I doing wrong?
The elements are too far apart. Need to either put them in the same parent, or use their containers... this might get you closer:
header h1 + div.entry-meta p:first-letter {
font-size: 300%;
/* etc... */
}
Related
I was wondering how this can be done.
Under each paragraph I want a 30px margin bottom, but only on articles with more then one paragraphs. How can I fix this?
I look out to your advice :)
Casper
If you're talking about <p> tags, using the following css selector:
p + p {
margin-top: 30px;
}
Would add a top margin of 30px to every paragraph that follows another paragraph... Would be the same effect as you asked.
http://jsfiddle.net/g91afp8z/
Actually it depends on your markup, however you may be able to target the <p> elements which are not the only of their type in their parent - the article - as follows:
EXAMPLE HERE
article > p:not(:only-of-type) {
margin-bottom: 30px;
}
If you want to exclude the last paragraph, add :not(:last-of-type) as well:
EXAMPLE HERE
article > p:not(:only-of-type):not(:last-of-type) {
margin-bottom: 30px;
}
It's worth noting that :not, :only-of-type and :last-of-type pseudo classes are not supported in IE 8 and below.
You could also fake the effect by adding margin-top to the 2nd, 3rd, 4th, ... paragraphs instead, by using General sibling selector p ~ p which is supported in IE7+ as well.
EXAMPLE HERE
article > p ~ p {
margin-top: 30px;
}
I just got done with my first proper web design (which was for my own site) and I've styled the first line and letter of the p tags for my articles and they work just fine, but the first letter and line of blockquotes also inherit that style and I'm simply not able to change it.
I have a feeling I'm missing something simple here. For instance, look at the blockquotes on this page.
I've tried explicitly styling the first line and letter of the blockquote but it does not seem to work. For what it's worth, I'm using first-of-type right now; I've also tried first-child but to no avail.
Update: Here's a jsfiddle --- http://bit.ly/1j70PCT
Either use the :not() pseudo class to prevent the blockquote element from being styled in the initial declaration:
.entry-content :not(blockquote) p:first-of-type:first-letter {
font-size: 2em;
}
..or overwrite the styling with a more specific selector:
.entry-content blockquote p:first-of-type:first-letter {
font-size: inherit;
}
blockquote > p:first-letter {
font-size: inherit;
}
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;
}
Is there any way to apply css formatting to just the first (or nth) line of text in CSS?
Suppose I have:
<h2>This is a line of text on my web page</h2>
That gets displayed as:
This is a line of text
on my web page
Is there a way to specify, a priori, separate formatting for the first and second lines without knowing where the line break will occur?
There is only the :first-line pseudo-element; there isn't any for the second, third, fourth, ... nth lines.
h2 {
font-size: 2em;
color: blue;
}
h2:first-line {
color: red;
}
Use the :first-line selector (CSS2) or ::first-line selector (CSS3).
h2:first-line {
font-weight: bold;
}
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3