<div>
<p>
Once upon a time..
</p>
<p>
A beautiful princess..
</p>
</div>
How can I select (in my css) the first letter of the first paragraph inside this div??
Thanks
Luca
div p:first-of-type:first-letter { font-weight: bold; }
In some cases you may have a header or some other elements types before the <p> For example:
<div>
<h1>My Great Title</h1>
<p>
In my younger years I was a great man, but all that changed when I saw...
</p>
<p>
I struck him for shaming my name, my family, my life. It was a shameful...
</p>
</div>
So in this case, p:first-child won't work for some reason, at least not in Chrome or Safari.
So instead you'll want to use this:
div p:first-of-type:first-letter{
/* add your awesome code here */
}
Thank you for your time.
first-of-type
You can use the CSS :first-letter pseudo-element to apply style to the first letter of a block-level element.
Well, I would add at least a class to the element you want the first-letter styling to be applied to. I'm sure you can do a css rule for the first paragraph of the first div; but if you happen to have another div with a paragraph at the beginning, then it is going to be applied to all of them. In other words, without using a class/id in your selector, it will be applied to the first letter of the first paragraph of EVERY DIV (which might not be the behavior you're looking for). So I would recommend this:
<div>
<p class="FirstLetter">
Once upon a time..
</p>
<p>
A beautiful princess..
</p>
</div>
And then in your css:
.FirstLetter:first-letter {
// styling rules here
}
But if my intuition is incorrect and you know for sure that this is what you're looking for, then #Demian Brecht's answer should do fine.
Yes, it's actually really simple:
div p:first-letter
CSS :first-letter Selector
div p:first-letter{
color:blue;
}
Working example HERE
Note: The following properties can be used with :first-letter
font properties,
color properties,
background properties,
margin properties,
padding properties,
border properties,
text-decoration,
vertical-align (only if float is 'none'),
text-transform,
line-height,
float,
clear
You can directly target the first letter of the entire div:
div:first-letter {
color: red;
}
demo: https://codepen.io/anon/pen/gRoypa
Related
Currently I have the following piece of code available which needs to be styled:
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
I would like to keep the HTML as-is and style the 'p' of both the summary and the body in a different way.
Is that possible? How? Thank you!
Yep it is :
div p:nth-child(1){
color: red;
}
div p:nth-child(2){
color: blue;
}
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<p>summary</p>
<p>body</p>
</div>
You need to use :nth-child() cssSelector to apply different styles for each tag. Look at below example.
div p:nth-child(1){
color:red;
}
div p:nth-child(2){
color:green;
}
You can either do that:
<p style="background-color:#000000;"></p>
Or do that:
First, add the "id" tag in your paragraphs tags.
<p id="bodyParagraph"></p>
Second, on the head tags include the:
<style>
#bodyParagraph{
background-color:#000000;
}
</style>
Why wouldn't you want to add specific classes to the summary paragraph and another for the body paragraph? Nothing wrong with that.
<p class="summary"> and <p class="body"> with their respective styling.
If you really want to avoid using a specific class for each, I'd suggest checking out the :first-child and nth-child pseudo-elements, so you style the first paragraph of that particular div one way and any other paragraphs a different way.
Assuming that the body paragraph might be multiple paragraphs, I'd strongly recommend against this approach since it will be hacky, more confusing, and more time consuming than just giving each paragraph its own style.
Sources:
W3Schools - first-child pseudo-element and W3Schools - nth-child pseudo-element
I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Is there anybody out there having a good idea or even a solution to this?
Javascript
Just use javascript to add/remove class if element is or is not wrapped.
JSFiddle
CSS
But if you really want to use just css then you can try with this problematic solution:
Use ::first-line pseudo element to style header and then style span as rest of h1. The problem is that it could style also your header if it would wrap at some point.
h1::first-line {
color: black;
}
h1 {
color: red;
}
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Sadly, CSS does not have any complex mechanism for managing lines.
I was wondering how I could apply CSS to an h2, except when it's directly followed by a paragraph. In that case, apply the CSS to the paragraph.
I've got a few sections, each with it's own title. However, sometimes it's followed by a subtitle. I'm applying a bottom margin to each title, but if there is a subtitle, there shouldn't be a margin between. In that case that bottom margin should be applied to the paragraph beneath the h2.
But.. how do I fix that?
I could give each h2 with a subtitle a class with "gotSubtitle" so I can keep them apart, but that's not the 'smooth' way to do this.
Just did it.
article h2:not(.gotsubtitle){
color: red;
}
<article>
<h2 class='gotsubtitle'>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>
Added the class and the :not selector. ;)
Not too smooth, but... Is what we can do with pure CSS.
Another possibility:
With jQuery...
$('article').has('p').addClass('title');
article.title h2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<h2>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>
Try this it will work:
h2.gotSubTitle{
/*apply CSS to an h2*/
}
p + h2.gotSubtitle{
/*apply CSS to an h2 which is directly followed by a paragraph*/
}
Adding class="..." to each element would sure work, but I think the easiest (and still clean) solution would be to pack both the h2 and the paragraph into a div and apply the bottom margin to the div. No condition checking and it should work just as well.
And as asked many times, there is an adjacent sibling selector, but you can't select preceding elements with it, only following ones. However, it is possible to apply the bottom margin to every h2 and then apply the same bottom margin and a negative top margin to the following paragraph element.
While to me that is everything but clean, it requires no modification of your html code.
Here's an example.
var headerTag = document.querySelectorAll("h2");
for(var i = 0; i < headerTag.length; i++){
var nextELement = headerTag[i].nextSibling.nextSibling;
if( (/P/).test(nextELement.tagName)) {
headerTag[i].classList.add("no")}
}
h2{
background:red
}
h2.no{
background: none
}
<section>
<h2>header is following</h2>
<h2>paragraph is following</h2>
<p>i am a paragraph :-)</p>
</section>
I have several div elements and I want to alternate another set of div styles within them. So basically change the child's style to alternating background colors like so:
HTML
<article class="post"> <!--first post-->
<div class="title">Title Here</div>
content here
</article>
<article class="post"> <!--second post-->
<div class="title">Title Here</div>
content here
</article>
CSS
div.title:nth-of-type(even) {
background-color: #F00;
}
div.title:nth-of-type(odd) {
background-color:#00F;
}
Is there a way to do this, because I know that using css to alternate styles it has to be within a parent. Or if not would there be any jquery script that i could use?
Thank you.
You should use
article.post:nth-of-type(even) .title
Works fine this way.
jsFiddle
Also, try to stay away from over-qualified CSS selectors like div.title, as explained in this article by CSS Wizardy. Basically, the .title in this instance is definitely within the article.post, so you don't need to add the div too.
Overqualified selectors make the browser work harder than it needs to
and uses up its time; make your selectors leaner and more performant by
cutting the unnecessary bits out.
nth-of-type is alway checking for the postition of the element in his parent. Hence, your div's are always first child of .post. That's why it doesnt work.
But you can check the child position of it's parent. Just like that :
.post:nth-of-type(even) div.title{}
.post:nth-of-type(odd) div.title{}
I came across html>body in one of the stylesheets and wanted to know as to why it is used.
html>body {
font-size: 16px;
font-size: 78.75%;
}
It's called a Child Selector.
The reason it's being used is likely because it's a hack to exclude IE6 and below. Those browsers don't understand the > selector.
More Information
the '>' means that it is referencing on child elements of the parent (in this case 'html')
so for example I could have an arrangement of divs that look like so
<div id="outermost">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
and i wrote some css like so
#outermost>.inner { background-color: #CCC; }
it would only apply the rules to the first level '#inner'
Obviously there is only one body tag however it used to be a hack to exclude ie6 and below to write different rules for ie7+ ;)
Child selector, more info here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
So in your code it would be any body child of html
'> symbol indicates child of
Above code means
The style applies to all the tag body which is a child of html
#sample>div
above applies to all divs which are children of the element with id sample