I have this html code
<article>
<div class="a">
<div class="a_b"></div>
</div>
<div class="c"></div>
</article>
I need to do some changes to div .c on div .a_b hover
Can I do this using scss (or native css), without using any javascript code?
You can deploy the :hover pseudo-class (and other pseudo-classes like :focus, :checked, :target etc.) to modify the styles on:
the element itself
a descendant of that element
a subsequent sibling of the element.
In this setup:
<article>
<div class="a">
<div class="a_b"></div>
</div>
<div class="c"></div>
</article>
You can apply a pseudo-element to .a and it could modify the styles on .a (itself), .a_b (its child) or .c (its sibling).
But a pseudo-element on either .a_b or .c can't modify the styles on any element except the element itself - because neither element has any children or any subsequent siblings.
The solution:
In your structure, add .a_b as a subsequent sibling of .a:
<article>
<div class="a">
</div>
<div class="a_b"></div>
<div class="c"></div>
</article>
and then use CSS positioning to re-position .a_b so that visually, it appears to be inside .a (even though it is actually a sibling element of .a, rather than a child element of .a).
Related
I'm experimenting with Bootstrap.js panels that can collapse. I'd like to see if it's possible to change styling of a panel-heading element but only when it's adjacent to a panel-collapse element. The selector below will change all headings obviously.
.panel-heading:hover {}
Because I'm trying to look ahead to see if the target element is followed by a particular class I'm not sure I see if CSS can support this.
<!-- This should change style of panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-collapse">
</div>
</div>
<!-- This should NOT change the style of the panel-heading when hovering over the panel-heading element -->
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
There is no way to currently do this in CSS3, however there is something being proposed in CSS Selectors Level 4. This feature has been widely requested.
Relational Pseudo-class: :has()
Such that you could do something like:
.panel:has(.panel-collapse) .panel-heading {
}
Meaning, apply styles to all .panel-heading classes that are a child of .panel classes containing .panel-collapse
This is a great article on upcoming CSS Selectors Level 4: https://www.sitepoint.com/future-generation-css-selectors-level-4/
In the meantime, you'll have to use something like jQuery. You could add a class like .panel-hoverable to all .panel elements that contain elements with the class .panel-collapse
The snippet below is a part of a much larger structure with many .step elements.
I need to match all .stepText elements that are next to .stepTitleAndImages ul.standard
In other words, match all .stepText elements that have .step parent that has .stepTitleAndImages child that has .stepImages.standard child
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages standard"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
<div class="clearer"></div>
</div>
<div class="step">
<div class="stepTitleAndImages">
<h3 class="stepTitle"></h3>
<ul class="stepImages medium"></ul>
<div class="clearer"></div>
</div>
<div class="stepText "></div>
<div class="clearer"></div>
</div>
PS: I cannot modify the HTML. Cannot use anything other than pure CSS.
Just use this for selecting first case
.step:nth-child(1) .stepText {
... Your CSS here
}
For second one use
.step:nth-child(2) .stepText {
... Your CSS here
}
For selecting both use
.step .stepText {
... Your CSS here
}
Then you should require jquery for that
Selecting Parents sibling is not possible only with pure CSS yet, You can achieve this by a single line of jquery:
$('ul.standard').parent().siblings(".stepText").css(...your CSS here);
This cannot be done with your HTML structure and with pure CSS. The closest solution to your problem, changing the HTML structure and with pure CSS, would be to move the standard class to its parent tag:
<div class="stepTitleAndImages standard">
<h3 class="stepTitle"></h3>
<ul class="stepImages"></ul>
<div class="clearer"></div>
</div>
This would allow you to use the adjacent sibling selector (+), which matches the second selector if it's the direct next sibling of the first, like this:
.stepTitleAndImages.standard + .stepText {
/* Styles */
}
A more flexible approach would be to use the general sibling selector which would match any sibling preceded by the first selector, not only the direct next one:
.stepTitleAndImages.standard ~ .stepText {
/* Styles */
}
The :has pseudo-class is in development by Mozilla, but it hasn't hit any stable browsers yet. With it, and with your HTML structure, you could go:
.stepTitleAndImages:has(.standard) + .stepText {
/* Styles */
}
Unfortunately, currently you can't solve this in any other way with CSS (and with your HTML structure) only.
Here is the html I am working with. I want to write a css selector for the Item with text "DESIRED ELEMENT":
<div class="TopDiv">
<div class="container">
<div class="row">
<div class="span2">
<strong>Text1</strong>
</div>
<div class="span3">Text2</div>
<div class="span2">
<strong>Text3</strong>
</div>
<div class="span3">DESIRED ELEMENT</div>
</div>
<div class="row">
<div class="span2">
<strong>Text4</strong>
</div>
<div class="span3">Text5</div>
<div class="span2">
<strong>Text6</strong>
</div>
<div class="span3">
<div>Text7</div>
<div>Text8</div>
<div>Text9</div>
<div>Text10</div>
<div>Text11</div>
<div>Text12</div>
<div>Text13</div>
</div>
</div>
</div>
</div>
I am having a lot of trouble getting to the div that that I want because I don't completely understand the nth-child of type this or that or getting a child of a child.
I just want something that is nice and short that will retrieve the 4th div tag child of the first row after container.
The selector depends on if that is the order your elements are always in?
Anyway, you could use:
.row:first-child > .span3:last-child
This will select the last element with the class .span3 which is a child of the first .row.
jsFiddle here.
If you want to support last-child in IE8 and before, there is always Selectivizr.
One selector that should work in IE7/IE8 could be .row:first-child > .span3 ~ div.span3.
Only use this though if there are exactly two elements inside a row with the .span3 class.
jsFiddle here.
If it's not the last, but always the fourth, use .row:first-child > div:nth-child(4).
jsFiddle here.
the 4th div tag child of the first row after container.
The css translation of that will be:
after container
.container >
of the first row
.row:first-child >
the 4th div tag child
div:nth-child(4)
so in one line:
.container > .row:first-child > div:nth-child(4)
find the container class and in childs find the first row class and inside find the 4th div tag.
Suppose we have this html
<div class="a">
<div>...</div>
...
<div id="b">xyz</div>
</div>
<div class="a">
<div>...</div>
...
<div id="c">abc</div>
</div>
Applying some style on #b upon targeting it in url is easy to do with the css :target selector.
Is it possible to apply some some style on the parent div with class="a" as well?
No, since you would need a CSS parent selector for that. Nothing in CSS2 and CSS3 has been specified for that. CSS4 does have (a somewhat) parent selector (called the subject selector) using the ! symbol, but no browser supports it (yet).
You can add an extra id to your <div class="a"> and make it:
<div class="a" id="abc">
...and still use the :target.
No, CSS cascades (CSS = Cascading Style Sheets), it doesn't go up.
You will need to explicitly apply styling to the parent element.
You would be better doing something like #otinanai suggested and adding a class to your child divs. e.g.
HTML
<div class="a">
<div>...</div>
...
<div class="aItem" id="b">xyz</div>
</div>
<div class="a">
<div>...</div>
...
<div class="aItem" id="c">abc</div>
</div>
CSS
.a {
border: 1px solid #000;
}
.aItem {
color: #999;
}
So you will use classes to consistently style your elements. Otherwise you will have to write CSS for D, E, F G through to Z, and only use the ID's for bookingmarking/URL purposes.
I downloaded a framework and they are using this as a css selector:
#Footer .footerTop
Why not just use:
.footerTop
Are they the same, or selection is different?
#Footer .footerTop only applies to the .footerTop within #Footer
<div id="Footer">
<div class="footerTop">I qualify</div>
</div>
<div id="Copyright">
<div class="footerTop">I don't qualify</div>
</div>
Using just .footerTop would apply rules to both of the inner DIV elements, losing its specificity.
# is an id selector and . is a class selector.
So they are selecting an element with class footerTop inside an element with id Footer.