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>
Related
Basically I want to style a p tag when it is not present inside another div.
For example
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
</div>
</div>
I tried the following but no luck
.container > :not(.secondClass) + p {
color: red;
}
Tou can change the style like this :
div > :not(.secondClass) > p {
color: red;
}
There are several ways you can do this, depending on context. See code below:
.container .row > p {
background: red;
}
<div class="container">
<div class="row">
<p>I want to style here</p>
<div class="secondClass">
<p>I don't want to style here</p>
</div>
<p>I want to style here</p>
</div>
</div>
,
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, is there any way for <p> elements to not end in a break? You could add them together, like this:
<p id="id1">content 1 content 2 </p>
But can how can you keep an the id for the <p> element and not end in a break? Is there CSS for that or is it just impossible for <p> elements?
Code:
<p id="id1">I like to eat </p>
<p id="id2">Icecream and pickles </p>
<p id="id3">with cucumbers on top </p>
Desired result:
I like to eat Icecream and pickles with cucumbers on top
Actual result:
I like to eat
Icecream and pickles
with cucumbers on top
p is a block element by default, which means it takes up an entire horizontal row. One option would be to use span which is inline by default, or another option is to use css to make the p display:inline.
This is how it is. You can use Css display inline
<p id="id1" style="display: inline">I like to eat</p>
<p id="id2" style="display: inline">Icecream and pickles </p>
<p id="id3" style="display: inline">with cucumbers on top </p>
OR
This is also another way of doing. and I would prefer this way as it is more clean.
<style type="text/css">
#id1,
#id2,
#id3 {
display: inline;
}
</style>
<p id="id1">I like to eat </p>
<p id="id2">Icecream and pickles </p>
<p id="id3">with cucumbers on top </p>
The Css Inline - Displays an element as an inline element (like ). Any height and width properties will have no effect.
#test1 p {
float: left;
}
#test2 p {
display: inline-block;
}
#test3 {
display: table;
}
#test3 p {
display: table-cell;
}
hr {
clear: both;
}
<h2> Use float </h2>
<div id="test1">
<p>I like to eat </p>
<p>Icecream and pickles </p>
<p>with cucumbers on top </p>
</div>
<hr/>
<h2> Use display:inline-block </h2>
<div id="test2">
<p>I like to eat </p>
<p>Icecream and pickles </p>
<p>with cucumbers on top </p>
</div>
<hr/>
<h2> Use display:table </h2>
<div id="test3">
<p>I like to eat </p>
<p>Icecream and pickles </p>
<p>with cucumbers on top </p>
</div>
<hr/>
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>