This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 7 years ago.
I have the following markup:
<div class="heading-container">
<p class="stroke">Who we</p>
<h2 class="section-title extreme-bold">Contact us</h2>
<p class="stroke"></p>
</div>
Now I can select the 1st .stroke using the following selector:
.heading-container .stroke:nth-child(1){
max-width: 200px;
}
but the The following does't work for the 2nd stroke class:
.heading-container .stroke:nth-child(2){
max-width: 200px;
}
but the following again works:
.heading-container .stroke:nth-child(3){
max-width: 200px;
}
Now why does the value 3 work for the 2nd nth-child slection?
For the 2nd nth-child is't the followig suppose to be appropriate:
.heading-container .stroke:nth-child(2){
max-width: 200px;
}
nth child, as explained here selects based on elements that are the nth child of their parents.
so 1 is working, because the first stroke is the first child.
3 works because the second stroke is the third child.
2 won't work, because there are no strokes that are 2nd children, just h2
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
How are the points in CSS specificity calculated
(7 answers)
Closed 2 years ago.
Which of the following two selectors has a higher CSS specificity?
Selector 1 -> #object h2::first-letter
Selector 2 -> body .item div h2::first-letter:hover
My Answer is Selector 1, I calculated 111 for that.
Selector 2 gave me a specificity of 6.
Am I right?
You can't hover over a ::first-letter, however, all things being equal, the first selector is stronger:
/* Selector 1 -> #object h2::first-letter */
#this h2::first-letter{
color: red
}
/* Selector 2 -> body .item div h2::first-letter:hover */
body .item div h2::first-letter{
color: blue;
}
<div class="item">
<div id="this">
<h2>This is a title</h2>
</div>
</div>
The first one has a higher specificity since it actually contains an ID, which takes precedence over almost everything else.
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?
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).
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have DOM like this
<div class="outer">
<div class="inner">
</div>
</div>
and corresponding CSS is like
.outer {
width: 700px;
}
, where inner could by typeA, typeB.....
Later I found that I want to enlarge outer when particular typeX show up, but
.outer .typeX {
width: 90%;
}
will apply style width: 90% to .typeX div not .outer div. How do I solve this? Is it possible in pure CSS? (Assume .outer is fixed since it is generated by other library)
Unfortunately, what you are looking for would be a parent selector, which does not yet exist in CSS.
Maybe someday (e.g., in Selectors Level 4).
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/