CSS selector for first element without class - javascript

I'm new to css and I have some auto generated snippet as following,
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>
I have attached auto generated element into display div (first div) through javascript snippet.
I want to select only first paragraph using CSS.
I tried following CSS also tried nth-child(1) ,
p:first-child {
color:red;
}
But it's selecting both of the values.

Both <p> elements are the first child of their respective parent DIVs. You want the <p> that's the child of the first child DIV.
div:first-child > p {
color: red;
}
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>

you can use first-of-type also to achieve that goal
div:first-of-type > p {
color: red;
}
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>

#display > div > div:first-child > p{ color: red }

Related

Simplify multi toggle divs

I would like to simplify the code by not typing each div (#TopicA, #TopicB, #main, etc.) ID that is to be collapsed when an option is selected.
I would like all the divs besides the ones that trigger the button to automatically collapse. How can I make this happen?
Example: When I click TopicA1, I want to collapse all other divs, but I dont want to put all div IDs in JS code.
Demo: JSFiddle
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
$(".ClassButtonA").click(function() {
$("#TopicA").toggle("slow").trigger('reset');
});
$(".ClassButtonA").click(function() {
$("#TopicB, #TopicC, #main").slideUp("slow").trigger("reset");
A single function handles the toggle, and hides all siblings to the currently displayed div. Note that I did modify your structure some -- the content pane div now contains all the divs I wish to show/hide, thus leaving the button pane displaying. Hope it helps!
// Event handler for click on any button el
$(".QA button").click(function() {
// The text of the button matches the id
// of the div els, if I strip spaces.
var toggleThis = "#" + $(this).text().replace(/\s/g, '')
// Using the given string above, toggle that
// div el, and hide all siblings to that.
$(toggleThis).show("slow").trigger('reset').siblings().hide("slow").trigger('reset');
});
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius: 10px;
text-align: center;
}
#TopicA,
#TopicB,
#TopicC,
#TopicA1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div class="content-pane">
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
<div id="TopicA1" class="QA">
<h2>123</h2>
</div>
<div id="TopicB" class="QA">
<h2>YY</h2>
</div>
<div id="TopicC" class="QA">
<h2>ZZ</h2>
</div>
</div>

How do you add a class to parents only if two separate child divs are present

How do you add a class to parents only if two separate child divs are present?
The code here works if the two classes are present in a child
$('.class1.class2').parents().addClass('newclass');
<div class="parentdiv">
<div class="class1 class2">
</div>
I am trying to add class to parentdiv only if class1 and class2 are children
<div class="parentdiv">
<div class="class1">
</div>
<div class="someother">
</div>
<div class="class2">
</div>
You can use :has() with selector .class1 ~ .class2, .class2 ~ .class 1 to select .parentdiv element where .class1 or .class2 is child element is a general sibling of .class2 or .class1 respectively. If requirement is to select .parentdiv only if .class1 is followed by .class2 you can use selector .class1 ~ .class2
$(".parentdiv:has(.class1 ~ .class2, .class2 ~ .class 1)")
.addClass("selected");
.selected {
color:olive;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class2">class2
</div>
</div>
<div class="parentdiv">
<div class="class1">class1
</div>
<div class="someother">smoother
</div>
<div class="class3">class3
</div>
Use .filter to select only those elements which satisfy condition provided in callback
var filtered = $('.parentdiv').filter(function() {
return $(this).find('.class1').length > 0 && $(this).find('.class2').length > 0;
});
filtered.addClass('newclass')
.newclass {
border: 2px black dotted;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parentdiv">
<div class="class1">
Hello class1
</div>
<div class="someother">
</div>
<div class="class2">
Hello class2
</div>
</div>

Keep a div as last child of its parent even after any new div is appended to its parent

Hello i am quite struggling with a problem. The structure is like :-
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
After insertion of new child
<div class="parent" >
<div class="child1" >
</div>
<div class="child2" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
Thus I always want to keep my child with class "childToBeKeptLast" as last child no matter how many insertion take place in the parent div.How to achieve this by css or jquery ??
Any help will be appreciated ... Thank you ...
Try to use .insertBefore() at this context,
$('.child2').insertBefore('.parent .childToBeKeptLast');
So the above code would insert the new children before of the element which is having the class childToBeKeptLast and which is the descendant of the element with the class parent
For Info, in CSS with young browser, the flex model can help you to keep one last .. seen at screen:DEMO
BASIC CSS needed :
.parent {
display:flex;
flex-direction:column;
}
.childToBeKeptLast {
order:1;
}
/* for demo, make some content*/
div:before {
content:attr(class);
}
The :not() selector works too if you want somehow filter some browsers
:not(.childToBeKeptLast) {
order:-1;/* puts anything that has not this class up in front */
}
HTML of demo:
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
<div class="child1" >
</div>
<div class="whatever clss wich is not meant to be last seen" >
</div>
<div class="child1" >
</div>
<div class="child1" >
</div>
</div>
You also use:
$('.childToBeKeptLast').before('<div class="child2"></div>');

remove class from parent element with jQuery?

I can't figure out how to remove class from a parent element, basically I have a <audio> tag (from now on referred to as this) which is inside a div with class="playing" how can I remove this class?
tried this, but than understood that it will remove class from audio element not it's parent div:
this.removeClass("playing");
this.parent().removeClass("playing");
$(this).closest('div').removeClass("playing")
or
$(this).closest('div.playing').removeClass('playing')
this.closest('div[class=playing]').removeClass("playing");
JSfiddle Demo
<div class="bold">
<p id="p1" class="blue under">Hello</p>
</div>
<div class="bold">
<p id="p2" class="blue under highlight">and</p>
</div>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
$("#p1").parent().removeClass("bold");
$("input").keyup(function () {
$(this).parent().removeClass('bg-red');
});
.bg-red {
background-color: red;
}
.h-50 {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-5 bg-red">
<h3>Add text inside input will remove "bg-red" class from parent div</h3>
<input placeholder="Enter anything" type="text">
</div>

Add class to last div when it exists

I have the following HTML structure, I want to add a class to the last <div> which contains the <p> tag but only when it exists.
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
Any suggestions?
Simple snippet:
if($('#view div:last p').​​​​​​​​​​​length)
$('#view div:last').addClass('myClass');​​​​​​​​​​​
Will get all the divs that has a p tag
p = $('#view div p');
if (p.length) {
$(p[p.length - 1]).addClass("largerText");
}​
Here is the fiddle
Yes Roaster given right answer and this is the fiddle for it. http://jsfiddle.net/sameerast/qhsXM/
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>​
if($('#view div:last p').length){
$('#view div:last').addClass('myClass');
}
​
.myClass {
border:red 1px solid;
}​

Categories