This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 7 years ago.
I have tried to use :nth-child(n), which does not work as well, am I using this selector on the wrong elements?
on the element div with the following class, block_photo.
.block_photo:first-child, .block_video:first-child {
margin-left:0px;
}
http://tmptstdays4god.ucoz.com/
Your html markup is the following:
<section class="new photos">
<h4 class="title">...</h4>
<div class="block-photo">...</div>
<div class="block-photo">...</div>
...
</section>
first-child / nth-child
Matches an element if it is the first child.
.block_photo:first-child {
/* styles here apply to the .block_photo IF it is the first child */
}
In your case, because the first child is <h4>, the selector .block_photo:first-child matches no element.
first-of-type / nth-of-type
Matches the first element of a certain type
.block_photo:first-of-type {
/* styles here apply for the first .block_photo element */
/* that is what you need */
}
References:
W3C specification on first-child
W3C specification on first-of-type
Related
This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
This question already has answers here:
What does '&.' in '&.sub-title' indicates in scss?
(1 answer)
What does the & mean in an scss selector?
(1 answer)
What does an "&" before a pseudo element in CSS mean?
(4 answers)
Closed 4 years ago.
I came across some stying in my scss file which looks like this:
:host {
&::before {
content: '';
display: block;
width: 100%;
height: $channel-border-w;
background: $color-border-divider-bg;
}
}
does this mean to style the element before my host?
From MDN docs,
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
The & before it indicates that it is adding this pseudo selector to the selector it is nested under, which is your host element.
The snippet you posted could be translated to:
:host::before {
... your styles here ...
}
& adds something selected to parent selector.
::before creates a pseudo-element as child of parent selector.
i let you the full doc here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://css-tricks.com/the-sass-ampersand/
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 5 years ago.
I want the following selector to match only those <span> elements that are direct children of '.grand-grand-child' and not descendants of '.grand-grand-parent':
:not(.grand-grand-parent) .grand-grand-child > span {
color: blue;
}
But it fails to apply the rule. Is it possible to solve the problem without Javascript? In my experience, :not rules at the beginning have to be followed with direct path made with > signs. Am I right?
See, there's a problem here: the first part of this selector will be applied to any element in the second selector's match ancestor chain (in attempt to match the whole rule). Consider the following:
:not(.parent) .child {
color: blue;
}
<div class="parent">
<div class="child">
Which color am I?
</div>
</div>
And the answer is blue, even though that .child element is clearly matched by .parent .child rule. The problem is, this rule reads as
match any element with class 'child' if one of its ancestors is without class 'parent'
And of course, it has such an ancestor - <body> element. Now compare with this fragment:
:not(.parent) > .child {
color: blue;
}
<div class="parent">
<div class="child">
Which color am I?
</div>
</div>
And now the answer is black, as the selector reads as...
match any element with class 'child' if its direct parent is without class 'parent'
Another way will be opened when browsers start supporting CSS Selectors Level 4 negation spec, allowing something more than simple selector as :not argument. It'll be possible to write something like:
.child:not(.parent *) { /* */ }
And now if any element is ancestor chain of .child matches .parent, it's not matched. But both Chrome and Firefox at the moment of writing still lack support of this feature - they only support CSS Level 3 negation.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have Html structure below
<div>
<div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
<div class="container"></div>
</div>
CSS:
.experimental-bar { height: 50px; }
.experimental-bar-minimal {height: 25px; }
.container { height: ~"calc('100vh - 50px')"; }
I want to change height of container when experimental-bar-minimal class is called
I have used
div:has(.experimental-bar) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 25px')";
}
Can anybody help me out. Thanks in advance
:has is not working
There is no < Selector in CSS, and there is currently no option to style a parent element depending on one of its childs. At least not with vanilla CSS, I am not sure if this could be achieved with a preprocessor like Sass, Less or Stylus.
There acually is a > Selector, which selects only direct childs of the parent node. Please read the MDN Documentation for further info.
Ther actually is the :has pseudo class, which works like the code below, but it is currently not supported by any browsers:
.parent:has(> child) {
/* Style Rules */
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.
For example, say I have a table with classname "test" nested inside a div. Is there some sort of:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.
That's what jQuery is for :-)
You can use has():
div:has(> .test) {
/*styling, for div, not .test ...*/
}
In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.
div:not(:empty) {
// your styles here
}
However I'm not sure if all browsers support this.
div:not(:empty) {
margin:0;
}
is NOT recognized by http://jigsaw.w3.org/css-validator/ as CSS2
it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in
div.myclass { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }
good luck
Mike
:empty pseudoclass supported by Firefox, but is not compatible with IE.
But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm . Saved my bacon