Contained within a parent element (e.g., div, ul), I would like to set the color of a single paragraph, then have all subsequent paragraphs receive the same color -- until a new class of paragraph comes along to change the color. I tried to implement selectors to get the job done, but the mixed results only ended up confusing me. Suggestions would be appreciated. Thank you.
<html>
<head>
<style>
p.r { color: red; }
p.g { color: green; }
</style>
</head>
<body>
<p class="r">RED
<p class="g">GREEN
<p class="r">RED
<p>red
<p class="g">GREEN
<p>green
<p class="r">RED
<p>red
<p>red
<p class="g">GREEN
<p>green
<p>green
</body>
</html>
Set the style on the parent class ie.
HTML
<div class="parentdiv">
<p>this will appear blue</p>
<p>this will also appear blue</p>
<p class="green">this will appear green</p>
</div>
CSS
.parentdiv p {
color: blue;
}
.parentdiv .green {
color: green;
}
It's not a very scalable solution, but one option is to repeat the adjacent sibling combinator and p:not([class]) for as many consecutive <class> + <classless> elements there are in a row:
p.r,
p.r+p:not([class]),
p.r+p:not([class])+p:not([class])
{
color: red;
}
p.g,
p.g+p:not([class]),
p.g+p:not([class])+p:not([class])
{
color: green;
}
<p class="r">RED</p>
<p class="g">GREEN</p>
<p class="r">RED</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p class="r">RED</p>
<p>red</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p>green</p>
Related
I have this HTML
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p class="text-box">Hello</p>
</div>
</body>
</html>
that produces
The second paragraph works as expected because the paragraph element does not have a font-weight style to be overridden.
Is there a way to override the CSS priority order so the class on the third paragraph is overwritten by the style defined in the container div so that the text is blue?
you're actually asking if you can override a CSS rule.
obviously the answer is NO.
CSS thinks in a correct way in my opinion, i.e. you can set rules on containers, but at the same time you can set them on children.
the priority states that the rules on children win over fathers, so if you don't need the CSS rule on the child, why set it?
Your goal with this code:
<html>
<head>
<style>
.text-box {
color: red;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div style="color: blue;">
<p >Hello</p>
</div>
</body>
</html>
You can give class to parent div and target the 3rd paragraph to give the color blue
<html>
<head>
<style>
.text-box {
color: red;
}
.text-boxDiv .text-box{
color: blue;
}
</style>
</head>
<body>
<p class="text-box">Hello</p>
<div style="font-weight: bold;">
<p class="text-box">Hello</p>
</div>
<div class="text-boxDiv">
<p class="text-box">Hello</p>
</div>
</body>
</html>
<div>
<p class="text-box" style="color:blue;">Hello</p>
</div>
You will have to directly give the color property to the p tag inside your div tag
Or you could add a class to the div and do something like this:-
/* CSS */
.myDiv > p {
color: blue;
}
I'd like target the second instance of a class without adding another class. :nth-child and :nth-of-type doesnt seem to work because its not sibling. Is this possible?
<div>
<div>First class.
<p className="blue">1st paragraph.</p>
</div>
<div> hello
<section>
<p class="blue">2nd paragraph.</p>
</section>
</div>
</div>
The chosen nested markup prevents any form of targeting child-indexed pseudo-classes, now and in future. But, as of now, there is a chance with markup which can be targeted by the :nth-child(An+B [of S]?) form of an additional tree-structural child-indexed pseudo-class selector of the Selectors Level 4 draft/specification.
body { margin: 0; font-size: .95em; }
div, p { margin: 3px; font-size: inherit; }
.blue { color: lightblue; }
.orange { color: orange; }
.red { color: palevioletred; }
:nth-child(2 of .blue) { color: palevioletred; }
<div>
<div>
hello
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
<p class="orange">
2nd paragraph and 1st of ".orange"
</p>
<p class="blue">
3rd paragraph and 2nd of ".blue"
<br/>
(... as of now will be
<span class="red">red in safari</span>
since it already supports the
<a class="red" href="https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo">
<code>:nth-child(An+B [of S]?)</code>
</a>
tree-structural child-indexed pseudo-class selector of the
<a class="red" href="https://drafts.csswg.org/selectors-4/">
Selectors Level 4
</a>
specification ...)
</p>
</div>
<div>
hello
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
<section>
<p class="blue">
1st paragraph and 1st of ".blue"
</p>
</section>
<p class="blue">
2nd paragraph and 2nd of ".blue"
(should be <span class="red">red in safari</span>)
</p>
</div>
</div>
I want to add/remove a class to an element (child of the same div is being clicked) for example, if the user press the #first element: The first element should now have 2 classes: .block .active. and the should now look red, But every other should remain intact. I've try the following (code below) nonetheless after I click on one block all of the blocks change their state and now all of them have both classes: .block .active.
Since I have a lot of blocks, If possible I don't want to use id selectors, just detect and apply the desired classes on the same parent div.
css
.block p{
color: blue;
}
.block.active p{
color: red;
}
html
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
jQuery
$(".block").click(function(){
$("block").closest( "block" ).toggleClass( "active" );
});
You were almost there. Instead of using .block & closest you can target the element being clicked with this.
In the below code, we are first removing the active class from all elements with class block and then applying the active class to the clicked element.
$(".block").click(function(){
$('.block').removeClass('active');
$(this).addClass( "active" );
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
if ( $(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$('.block').removeClass('active');
$(this).addClass('active');
}
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
$(this).toggleClass("active");
});
So I'm working with a tool that allows me to provide CSS style sheets, but I'm facing some issues.
In my original HTML code I have many DIV's inside DIV's, which makes it a little hard to fix the code. In my original code the DIV's stand for Groups, and at the first group I want to assign different styles as I do to the others.
In my example below, I'd like to add styles to the first <div class="Test2">, but not to the second and third. I've tried using :not(:first-child), or things like that as you can see, but none of them worked.
Please help me out!
.Test1 {
background: #ff0000;
color: green;
}
.Test2 {
color: blue;
}
.Test2 div:nth-child(1n+2) {
color: yellow;
}
<body>
<div class="Test1">
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
</div>
</body>
There are multiple ways to do this, you can use :first-of-type to make sure the first element with class Test-2 and type div will be affected.
.Test1 {
background: #ff0000;
color: green;
}
.Test2:first-of-type {
color: blue;
}
.Test2 {
color: yellow;
}
<body>
<div class="Test1">
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
<div class="Test2">
<span>The first paragraph.</span>
</div>
<div class="Test3">
<div>dummy</div>
<p>Test</p>
</div>
</div>
</body>
.Test2 div:nth-child(1n+2) {
color: yellow;
}
Will make Test2's 1n+2'th child appear yellow. Test2 has only one child: <span>The first paragraph.</span>. You'll have to put the selector on the div above. (Test2 is the first child of Test1)
All of them have the same class just change the class on other two or keep Test2 as it is for common properties that you want to apply and if you want the first one to have different style you can give it a new class with any name and use that class to aplly proprites different from the rest of divs
If i get it right, You want to achieve blue color just on The first paragraph.
.Test2:first-child{
Color:blue;
}
Should do that.
I've been searching around and couldn't find anything on this. I only found solutions in JavaScript or jQuery.
I want to know if there is any solution for selecting all elements inside a main wrapper? But then I also want to select all spans inside the wrapper with the :not(:span).
I'm trying to build up my knowledge on my CSS abilities and would like to know if this can be achieved?
Example of what I want to achieve: (Not a working example - This is what i have so far)
div#main-content > *{
color: blue;
}
div#main-content > *:not(:span){
color: green;
}
<div id="main-content">
<h1> Hello </h1>
<p> Second </p>
<p> Third </p>
<span> Fourth </span>
<h3> Fifth </h3>
</div>
You are almost there. Remove the : from :span and you will select every element that is NOT a span tag. In other words use the selector div#main-content > *:not(span)
div#main-content > *{
color: blue;
}
div#main-content > *:not(span){
color: green;
}
<div id="main-content">
<h1> Hello </h1>
<p> Second </p>
<p> Third </p>
<span> Fourth </span>
<h3> Fifth </h3>
</div>
Remove the : from the :span. Then it will work. The : stays for an :pseudo element like :before or :checked, etc.
div#main-content > *{
color: blue;
}
div#main-content > *:not(span){
color: green;
}
<div id="main-content">
<h1> Hello </h1>
<p> Second </p>
<p> Third </p>
<span> Fourth </span>
<h3> Fifth </h3>
</div>
Inside :not() no need to use : with selector. so see the attached code for the update.
Updated code
div#main-content>* {
color: blue;
}
div#main-content>*:not(span) {
color: green;
}
<div id="main-content">
<h1> Hello </h1>
<p> Second </p>
<p> Third </p>
<span> Fourth </span>
<h3> Fifth </h3>
</div>