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;
}
Related
I'm trying to use a CSS :first-letter pseudo-element in a web page to enlarge and colorize the first letter of a paragraph (W), the only thing is that it's in a DIV tag and it's not displaying correctly. I have been to W3C schools and looked at the following here at Stackoverflow (css selector: first paragraph's first letter inside a div and css first-letter exclude other tags), but these don't seem to resolve my problem (more than likely I don't have the CSS setup correctly is my guess). Any help will be appreciated. Thanks.
Here is the CSS I'm using:
div homepara:first-letter {
font-size: 36px;
color: darkblue;
}
Here is the HTML I'm using:
<div class="homepara">Welcome to This Test Page.
</div>
Try this: div.homepara:first-letter. When you want to address a div with a class add a . between then.
Example
Your CSS selector isn't written correctly. Should be:
div.homepara:first-letter {
font-size: 36px;
color: darkblue;
}
div.homepara:first-letter
you just missed a '.' before the class name and there should not be space between the .classname and the div
i.e.. div.classname
DEMO
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... */
}
I thought I had my CSS down fairly well but I cannot seem to figure out why this problem occurs. I must be doing something wrong.
So if I want to select multiple elements that are children to a div I could write:
#mydiv > input, label{
}
Am I correct? I thought this to be true until I realized that other inputs and labels in my site were inheriting these CSS properties even though they were not in the div called #mydiv. To fix the issue I had to use:
#mydiv > input, #mydiv > label {
}
But I am pretty sure that this is not the quickest way to do so. I tried checking the Selector Page on W3.org but they do not give an example for my situation.
What am I doing wrong?
Am I correct?
No. The grouping selector (comma) has the lowest precedence, so you cannot use it to select multiple elements that are children of a div using this selector:
#mydiv > input, label
The most concise selector is the one that you found on your own:
#mydiv > input, #mydiv > label
You can DRY things up a bit using nested rules in LESS or Sass, though that does introduce a dependency in your code and/or build process.
Your second snippet is the simplest way to do it with pure CSS. The comma , separates isolated CSS selectors, so that's why you needed to begin each with #mydiv for both selectors.
You could use something like LESS, which would allow nested rules. Non-germane example:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But you're probably better off with pure CSS.
Your second method is good
#mydiv > input, #mydiv > label {
}
If you wanted to somehow do this without using multiple selectors separated by a comma, you could use a class name for both your input and label elements
.your-class-name {
}
or if for some reason input and label were the only two types of child elements for #mydiv, then you could use the universal selector like this:
#mydiv > * {
}
I got this code:
<div class="class1">text</div>
CSS code of class1 is following:
.class1 {
text-decoration: none;
}
The output looks on, until I move the mouse over the div. The text is underlined then.
Sure, I've tried a lot of methods like:
.class1:hover {
text-decoration: none;
}
I've also tried to add a !important attribute, but still without expected results. :/
I've also used firebug to debug the HTML & CSS code, and I can't find any class with attribute text-decoration: underline;.
I know this is such a silly question, but I'm out of ideas.
You should set the text-decoration property to none for the a element inside of .class1, since that is the element that contains the text (and likely the element that you are hovering on).
For example:
.class1 a (all a tags whose ancestor is .class1)
OR
.class1 > a (all a tags whose parent is .class1)
If you're setting a global <a> property elsewhere, you'll need to specifically override the <a> tags for that class.
.class1 a { text-decoration: none; }
and
.class1 a:hover {text-decoration: none; }
depending on if you have a global hover defined too
div.class1 a { Properties:values}
Would be a good practice.
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