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
Related
Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?
The Code (http://jsfiddle.net/YWY4L/):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.
Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Explanations and illustrations for the workaround are given here and here.
The draft CSS Selectors Level 4 proposes to add an of <other-selector> grammar within the :nth-child selector. This would allow you to pick out the nth child matching a given other selector:
:nth-child(1 of p.myclass)
Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:
:nth-match(1 of p.myclass)
This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.
This it not possible to use the CSS3 selector :first-of-type to select the first element with a given class name.
However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-class and the adjacent sibling selectors to match an element that doesn't immediately have a previous element with the same class name :
:not(.myclass1) + .myclass1
Full working code example:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
I found a solution for your reference. from some group divs select from group of two same class divs the first one
p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}
BTW, I don't know why :last-of-type works, but :first-of-type does not work.
My experiments on jsfiddle... https://jsfiddle.net/aspanoz/m1sg4496/
This is an old thread, but I'm responding because it still appears high in the list of search results. Now that the future has arrived, you can use the :nth-child pseudo-selector.
p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }
The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.
eg:
<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
As a fallback solution, you could wrap your classes in a parent element like this:
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>
Not sure how to explain this but I ran into something similar today.
Not being able to set .user:first-of-type{} while .user:last-of-type{} worked fine.
This was fixed after I wrapped them inside a div without any class or styling:
https://codepen.io/adrianTNT/pen/WgEpbE
<style>
.user{
display:block;
background-color:#FFCC00;
}
.user:first-of-type{
background-color:#FF0000;
}
</style>
<p>Not working while this P additional tag exists</p>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
<p>Working while inside a div:</p>
<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
I found something that works
If you have a bigger class which contains something like grid, all of elements of your another class
You can do like that
div.col-md-4:nth-child(1).myclass{
border: 1px solid #000;
}
Simply :first works for me, why isn't this mentioned yet?
On this page, I want to hide the incorrect HTML displayed above the logo. It is generated by an old plugin we are replacing soon.
To start with, I tried the CSS:
.vine-home-block-grapes:first-child {display: none;}
but this does not remove the highlighted block below:
Can you help me determine why please?
Use css :first-of-type selector
.vine-home-block-grapes:first-of-type{
display:none;
}
That selector won't work as the element you are attempting to select is not the :first-child of its parent.
One way to do what you want is select all elements with that class name, set their styles as you wish and then, using a new rule with the sibling selector, override those styles for any element of that class appearing later in the parent.
.vine-home-block-grapes{
display:none;
}
.vine-home-block-grapes~.vine-home-block-grapes{
display:block;
}
Add this script. It would work fine without any problem:
<script>
var fourthChild = document.body.getElementsByTagName("div")[0];
document.body.removeChild(fourthChild);
</script>
Thanks to #FelixKling
Try wrapping the child elements in a <div> so the element can BE the first child of its wrapping element. Right now, your element is not the first child of <body> See the experiment here to show how :first-child doesn't work as expected, because really it's not the first child of its parent.
p:first-child {
background-color: aqua;
}
.vino:first-child {
background-color: lightgreen;
}
WORKS
<p>First</p>
<p>Second</p>
<p>Third</p>
DOESN'T WORK (because none of these are the first child of its parent, in this case, <body>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
Adding a wrapping div works.
<div>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
</div>
I am trying to keep my line of text from breaking in two using some code that is similar to this.
<h3>
<div class="home_widget">
<div class="home_widget_lc">join us</div>
on sundays</div>
</h3>
Using this code it is breaking between the "us" and "on." I want it all on one line.
The answer is to change the "home_widget_lc" div into a span.
(Of course you can change the display property of the div, but if you don't have a need for a block there, don't use a block element in the first place!)
Fix the markup: h3 is not allowed to have block-level children like div. Use span instead:
<h3>
<span class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays</span>
</h3>
Or, unless you have some reason to wrap the content of h3 in a container, assign the class to the h3 element (this may imply that the CSS code needs to be simplified, too):
<h3 class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays
</h3>
If you cannot change the markup, you need to hope that it will work reasonably despite the invalidity and to add CSS that more or less tries to turn the div elements to span elements, in the styling sense. In practice, it suffices to do that for the inner div:
.home_widget_lc { display: inline; }
Depending on whether the class name home_widget_lc is used elsewhere for other purposes, you may need to write a more specific selector to prevent the rule from having undesired effects on other elements, e.g.
h3 div.home_widget div.home_widget_lc { display: inline; }
Use -
div {display:inline;}
or -
div.home_widget_lc {display:inline;}
Fiddle - http://jsfiddle.net/Sa9W4/
You can also check this for more clarification - http://quirksmode.org/css/css2/display.html
This is because you have used separate div for join us
<div class="home_widget_lc">join us</div>
and div is block element which starts from next line. The alternative of overwriting this feature of block elements you can use display:inline with those elements.
if you don't need special class only for join us you do something like this
<div class="home_widget_lc">join us on sundays</div>
can you alter the HTML?
<h3>
join us on sundays
</h3>
All in one line.
By default <div> tags are set to display: block.
Either change the CSS:
.home_widget, .home_widget_lc {
display: inline;
}
or change the HTML:
<h3>
<span class="home_widget">
<span class="home_widget_lc">join us</span>
on sundays
</span>
</h3>
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
<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