what is the difference between these selectors? [duplicate] - css

This question already has answers here:
What is the difference between these two style rules? [duplicate]
(2 answers)
CSS Child vs Descendant selectors
(8 answers)
Closed 4 years ago.
I have found two selectors
div p
and
div>p
What is the exact difference between these two css selectors?

The first is "descendant" selector: p anywhere inside div
div p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>
The second is "child" selector: p directly under div
div > p {
color: red;
}
<div>
Div
<p>Child</p>
<aside>
<p>Grandchild</p>
</aside>
</div>

div p this style will select all the p elements under the div whether the p is inside another div.
The div>p will only select the p which are under the div. if there is another div into the same div which has p element as well it will not select that p.

Related

How to write css selector for selecting element before a given element [duplicate]

This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 3 years ago.
I have two elements inside a wrapper div. The second sibling in the view sometimes get an active class (as per the logic of UI)
<div id="wrapper">
<div>some content</div>
<div class="active">some other content</div>
</div>
In those cases (when second child has an active class) - How can I target the 1st div from a css selector.
I've tried general sibling of the active div
.active ~ div
But this doesn't work since the target div should follow the selected div and should not be before it.
How to target a div which comes before another active div.
You can target the div which is not active (inside wrapper class)
.wrapper {
> div:not([class='active']) {
// apply styles
}
}

CSS Selecting all elements with a class inside a <body> with a class [duplicate]

This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
I'm using a CMS(Joomla), and they allow me to put a class for a tag and then I can modify the css for just that particular page.
I'm trying to use MDN to find the answer but I couldn't exactly get it to work the way I wanted.
Here is the JSFiddle they had on their page, I was messing around with it:
https://jsfiddle.net/amvz5dkb/13/
<div class="divclass">
<span class="spanclass">Span #1, in the div.
<span="betterspanclass">Span #2, in the span that's in the div.</span>
<span="betterspanclass">Span #3, in the span 1.</span>
</span>
</div>
<span>Span #4, not in the div at all.</span>
And here is my CSS
.divclass > .betterspanclass {
background-color: red;
}
This doesn't work, only
.divclass > span {
background-color: red;
}
Seems to have an effect but it doesn't affect span 3 at all, only span 1 and span 2. I want to make the background red for every betterspanclass inside divclass. Is this possible?

Which patterns used to select the element? [duplicate]

This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 5 years ago.
I learn css3 selectors, and i can't understand what is the difference between the following selectors:
div > div
div + div
div ~ div
Can somebody help me?
element>element
for example : div > p
Selects all elements where the parent is a element
element+element
for example :div + p
Selects all elements that are placed immediately after elements
element1~element2
for example : p ~ ul
Selects every element that are preceded by a element
see this like for all css selectors:
https://www.w3schools.com/cssref/css_selectors.asp
div > p Selects all p elements where the parent is a div element
div + p Selects all p elements that are placed immediately after div elements
p ~ ul Selects every ul element that are preceded by a p element
Here's a complete reference to all selectors https://www.w3schools.com/cssref/css_selectors.asp
A simple example
div > p{
color:blue;
}
div+p{
color:green;
}
#para ~ p{
color:red;
}
<div>
<p>Hello, im a child of div</p>
</div>
<p id="para">Hello, im adjacent to a div</p>
<p>Hello, im preceding to a div</p>

CSS: is "not a first child" selector possible? [duplicate]

This question already has answers here:
How to skip first child?
(5 answers)
Closed 7 years ago.
Does CSS make possible selecting all the child elements except a first child?
Yes, using :not(:first-child)
parent child:not(:first-child) { /* style */ }
Example:
div span:not(:first-child) {
color: red;
}
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
Just use the :nth-child selector:
:nth-child(n+2) {}
It will select all children starting with the second one. Or, if all children have the same class (or element tag) you can also use
#parent .class + .class {}
#parent div + div {}
You can use div:not(:first-child).

simple css code, i dont understand [duplicate]

This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.
which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?
#shape > div{
}
Actually A > B is a specialization of the more generic A B:
A B will apply to any element B being somewhere inside an element A.
A > B will only apply to elements B who are direct children of an element A.
Simple example:
CSS
.a .b {
color: red;
}
.a > .b {
color: blue;
}
HTML
<div class="a">
<div class="b">Hello</div>
<div class="c">
<div class="b">World!</div>
</div>
</div>
You can try this example right here at jsFiddle.
As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.
This selects any DIV that is a child of the element with the ID shape.
this applies the styles to divs which are direct children of element with id #shape
Demo: Fiddle
in the demo the style is not applied to section > div because the container div is not a direct child of #shape
> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape
Demo : http://jsfiddle.net/JDs9G/

Resources