CSS selector not functioning as expected - html

In the following simple document:
div+p {
color: red;
}
<div>
<p>Hi Caitlin! Welcome to CSS!</p>
</div>
The text between the 'p' (paragraph) tags is NOT displayed in red despite being the children of the div element. The '~' selector does not function either, but '>' performs as expected. I'm using Chrome 49 on a Windows machine.

+ is the adjacent sibling combinator.
The div and p have a parent/child relationship (> is the child combinator while a space is the descendant combinator) not a brother/sister relationship (which would be <div></div><p></p>).

div is the parent element while p is the child element
since the relationship between the elements is parent-child, you have to use '>' or ' '
but note that div > p will only select the immediate p child elements, it will not work on other p elements that are not an immediate child element of the div
That is
.parent > p{ color: red; }
only works like this
<div class="parent">
<p>this will be in red color</p>
<div>
<p>this will NOT be in red color</p>
</div>
<p>this will also be in red color</p>
<div>
<div>
<p>this will NOT be in red color</p>
</div>
</div>
</div>
but
.parent p{ color: red; }
works like this
<div class="parent">
<p>this will be in red color</p>
<div>
<p>this will also be in red color</p>
</div>
<p>this will also be in red color</p>
<div>
<div>
<p>this will also be in red color</p>
</div>
</div>
</div>

Related

How to change CSS for a div having child with specific text?

How to change CSS for the Div in the 1st line having h3 text "Example Text1"
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>
You can't apply a CSS rule based on the contents on an element with CSS only, with the exception of the :empty selector. :contains has been a suggested selector but has not been implemented.
You will either need to use JS, or apply CSS based on the ordering of the elements you have, for example in this case you could use
.test:first-of-type h3 {
color: red;
}
To only style the first h3 tag.
You could also look into something like :contains() from jQuery if you don't mind adding a dependency.
You can't give CSS to div having a child with specific text. But you can use :first-child CSS.
.test:first-child h3 {
color: red;
}
<div class="test">
<div>
<h3> Example Text1 </h3>
</div>
</div>
<div class="test">
<div>
<h3> Example Text2 </h3>
</div>
</div>

Targeting something inside of a div without a class?

Say I had: the following code. How could I select only the third div and style the 2 paragraphs inside assuming there are no classes or id's?
<div>
<h1></h1>
<p></p>
</div>
<div>
<h2></h2>
<input>
<div>
<p></p>
<input>
</div>
<div>
<h4></h4>
</div>
you can try to type in the CSS file for instance:
div:last-of-type
also if you need to target the second div you can get it by:
div:nth-of-type() in between the parances you can type the number you want to target
For inheritable properties, you may just specify the number of the child of the <div> element. e.g. div:nth-child(3)
For non-inheritable properties, you need to have a higher level of specificity to target the <p> elements. e.g. div:nth-child(3) p
To check if the property is inheritable, you may check the list here.
/* for inheritable properties such as color*/
div:nth-child(3) {
color: red;
}
/* for non-inheritable properties such as border*/
div:nth-child(3) p {
border: thin solid skyblue;
}
<div>
<h1> First
</h1>
<p>
</p>
</div>
<div>
<h2> Second
</h2>
<input>
<div>
<p> Third
</p>
<input>
</div>
<div>
<h4> Fourth
</h4>
</div>

Is it possible to make the last p within a specific div class have specific css?

To get the last p to have no margin, you could do last-of-type, however this doesn't work once you start having p nested within other divs.
Is it possible to have specific css for the last p within a specified class?
For example:
<div class="my-container">
<div class="banner-message1">
<p>1</p>
</div>
<div class="banner-message2">
<p>2</p>
</div>
</div>
To specifically make it so that the <p>2</p> has certain styling, but not the <p>1</p>
The css of div.my-container p:last-of-type would seemingly apply to both <p>1</p> and <p>2</p> since they are the last p within the parent div (in this instance banner-message1 and banner-message2)
https://jsfiddle.net/hygzq3ab/
Here's a jsfiddle, which has both a margin-bottom on the last p tag and then also padding of the container, so that the last p element looks essentially like it has a double bottom margin. last-of-type does not seem to work since it is contained within other div classes.
Example code for that would be div.my-container p:last-of-type { margin-bottom:0; }
If the <p> is always contained in a <div> then you could target that paragraph with
.my-container > div:last-of-type p {
margin-bottom: 0;
}
You need to target the paragraph inside the last div (also :last-child instead of :last-of-type would work as well in this specific example).
But if your last <p> is not always contained in a <div> then you could target it with
.my-container > div:last-child p,
.my-container > p:last-child {
margin-bottom: 0;
}
Here you must use :last-child instead of :last-of-type or — in case the last <p> is not wrapped in its own <div> — you will also target the paragraph contained in the last <div>
Is this what are you asking for?
html (your fiddle does have alot same ids of same element)
<div class="my-container">
<div class="banner-message">
<p>
1
</p>
</div>
<div class="banner-message">
<p>
2a
</p><p>
2b
</p>
</div>
<div class="banner-message">
<p>
aaa
</p>
</p>
<p>
3
</p>
</div>
</div>
and css:
.banner-message:last-child p:last-child {
color: red
}
Should do the trick
You also should use that: last:child
.my-container > div:last-child p {
margin-bottom: 0;
}

first of type with global class is not the same as if it is the local class [duplicate]

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
When we have this part of code:
<div *ngFor="element of elements1" class="element"></div>
<div *ngFor="element of elements2" class="element"></div>
And class Element:
.element {
color:red;
}
.element:first-of-type {
color:blue;
}
And we have two cases:
The first one is when the class element is global.
In this case just the first element of elements1 will be blue
The second one is when the class "element" is local.
In this case fist elements of both of the arrays will be blue
Why behavior in both cases isn't the same?
Try this:
<div
*ngFor="element of elements1; let first = first;"
class="element"
[ngStyle]="first && {'color': 'blue'}">
</div>
This will set the color only for the first div.
:first-of-type means "first of type" and not "first that matches the previous bit of the selector".
The class is irrelevent. The element type is div.
.element {
color: red;
}
.element:first-of-type {
color: blue;
}
<section>
<div class="element">This is the first div in the section</div>
<div class="element">
This is the second div in the section
<div class="element">This is the first div in the div</div>
<div class="element">This is the second div in the div</div>
</div>
<p class="element">This is the first p in the section</p>
<p class="element">This is the second p in the section</p>
</section>
first-of-type will get the element type using the class, so for example if the class is assigned on a p then the p should be the first of it's type to work so if there is any other p even from another class it will not detect it.
p:first-of-type {color:blue}
.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>
check this also:
CSS3 selector :first-of-type with class name?

Change the text color of child div one mouse over

I need to change the color of the text which is not the immediate element of the target element.
It is the child of another parent div. How do I target an outer element through css?
In the demo you can see another text' color changes on mouse over ofdiv1 span, likewise I want to change the color of div2 span
In my code, how can I target the div2's span (not the the div2 coz there will be many other elements inside div 2)?
PS - Need to target a child element of another parent from another parent element's child element.
HTML
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
Demo
If you only want to use CSS, you have to assign the :hover to .div1 in order to select .div2 in your hover (as you can not select a parent in CSS):
.div1:hover .another_txt {
color: red;
}
.div1:hover + .div2 span{
color: red;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
You can use JavaScript / JQuery for this. To my knowledge you cannot achieve it in CSS.
HTML:
<div class="div1">
<span id="hover">hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>
JS:
$(document).ready(function() {
$("#hover").hover(function() {
$("#target").css("color", "red");
})
})
Here is the live demo: https://jsfiddle.net/vf8ab8yh/1/
To target the span in the div2 when div1is hovered use the following CSS selector:
.div1:hover+.div2 span{
color: pink;
}
Demo:
.div1:hover+.div2 span{
color: pink;
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
<div>Don't change this</div>
</div>
The best you can do is to wrap the span in another wrapper (you can also not wrap it,your choice) then use the ~ selector.
The use of ~ is to select all the second element (.div2) preceded by the first element (.newDiv). You can read more from here.
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
.newDiv:hover~.div2>span {
color: pink;
}
<div class="newDiv"><span>hover me</span></div>
<div class="div1">
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>
The element1~element2 selector matches occurrences of element2 that are preceded by element1.
Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.
css selectors
.div1:hover~.div2 {
color: red
}
<div class="div1">
<span>hover me</span>
<div class="another_txt">
Another text
</div>
</div>
<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>