Lets say i have this structure :
<li>Something something <input type="checkbox"></li>
How could i apply a simple text-decoration: line-through; to li content when checkbox is checked ?
I tried this with no luck using the & sass selector :
li {
& input:checked {
text-decoration: line-through;
}
}
EDIT :
I appreciate all the answers,however i was looking to do this using sass,i thought the & parent selector has this functionality but after i researched a little bit,i found out its not meant to be used that way.
Nevertheless,i found a solution without tweaking my structure or add javascript,i found out that bootstrap does not constrain you to place the checkbox after the li content in order to show it in the far right position,you can place it before and it automatically sticks it to the right,so i did that and placed the li content inside a span,so i just selected input:checked + span which gave me the desired result.
You can't do it. A Element has only access to his child and siblings.
With the siblings there is a neat trick where you can achive a similar result.
At first you need to move your checkbox at the beginning (html) so you can style the next siblings with ~ selector.
Then you can apply some css rules to the parent to swap back to order.
div {
display: flex;
flex-flow: row-reverse;
}
div input[type="checkbox"]:checked ~ span {
text-decoration: underline;
}
<div>
<input type="checkbox">
<span>Hallo Text</span>
</div>
Sorry but you can´t, you need javascript or SassScript to do that, you can try this https://sass-lang.com/documentation/style-rules/parent-selector
You don't need Javascript for this, but you do need to be able to add something to your HTML.
You can do it if you are able to add an element - put the text into its own div and putting it after the input.
Then use CSS grid on the li element, changing the order that the input and the div are shown. This just changes the visual order so you can still use the + sign to indicate the element which is the immediately following sibling of the input.
li {
display: inline-grid;
grid-template-columns: auto auto;
}
li input:nth-child(1) {
order: 2;
}
li div:nth-child(2) {
order: 1;
}
input:checked+div {
text-decoration: line-through;
}
<ul>
<li><input id='input' type="checkbox">
<div>Something something</div>
</li>
</ul>
Related
My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered.
Example
I used the following code:
.child1 {
display: none;
}
a .title1:hover + .child1 {
display: inline-block;
}
But the hover effect is not working. What should I correct?
Thank you in advance!
I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.
Here is your code:
a .title1:hover + .child1 {
display: inline-block;
}
If you want it to work the way you need your a element must have 2 children: .title1 and .child1, also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.
I am trying to apply my CSS file to 2 of my lists
<ul class="list1">
<li>Cat</li>
<li>kittens</li>
</ul>
<ul class="list2">
<li>Pizza</li>
<li>Popcorn</li>
</ul>
I want only one of them to be inline so I'm trying
ul.list1 {
display: inline;
}
but the inline won't work unless I do
li {
display: inline;
}
which applies to all my lists. How do I make it son only inline affects one list?
I'm guessing you want one of the lists to be horizontal, like so:
.list1 li { display: inline; }
Look up how to use descendant selectors, it is one of the basic powers of CSS.
Increase the specificity of your selector. For example...
ul.list1 li { display: inline; }
For further complexity as an example... If you have both of these lists appearing twice in your site, once inside a div with the ID #content, and once inside a footer widget with ID #widget. Then you can target the list inside #content by typing.
#content ul.list1 li { display: inline; }
Here is a link to an article to the W3C Wiki on CSS3 Selectors
The above link will give you everything you need to know concerning combinators, pseudo-selectors and pseduo-elements. Learn this and you can conquer the internet.
Use
.list1 li {display:inline;}
The following code will make all of your listings inline, as I can understand, this is not your intention.
li {
display: inline;
}
Instead, you should specify that you only want one of the lists elements to have this style. You should therefor use the following code.
.list1 li {
display: inline;
}
This will make all list entries within the list1 class inline.
How do you change styles of another element based on whether the first element is empty.
<ul></ul>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
In the above code, I want to give a style for the second ul { color:red } (to be more exact the ul that follows) ONLY if the first ul is empty.
Is there a pure CSS solution for this?
You can do this, but only if the element in question is completely empty- yes, not even a whitespace.
http://jsfiddle.net/NicoO/uTJ4N/
ul:empty + ul
{
color: red;
}
To be more accurate, this is the selector you need for the first empty <ul> of the body and the exact following <ul>:
body > ul:first-of-type:empty + ul
{
color: red;
}
http://jsfiddle.net/NicoO/uTJ4N/1/
Try this code:
ul > li {
color: red;
}
Its selects the ul which has a li as child element. And those can be colored red then.
http://jsfiddle.net/keypaul/KfaQv/1/
ul:not(:empty) {
color:red;
}
I dont think a pure css solution is the way to go, but you can use a pre-processor as they allow you to pass conditional statements.
Is it possible with CSS to change the style of the number in an <ol> without changing the entire text in the <li> without adding extra markup around the li content?
You can disable the original <ol> style, then use :before selector with counters to add whatever style you want. Like here:
ol {
counter-reset: i 0;
}
ol li:before {
content: counter(i);
counter-increment: i;
padding-right: 0.5em;
color: red;
}
If you wish, you can even override some styles for particular elements of the list with nth-child selector (JS Fiddle):
ol li:nth-child(3):before {
color: violet;
}
... as cascading rules are still applied here. Note, though, that nth-child is not supported by IE8.
Is it possible to have a CSS rule which basically "undoes" a prior rule?
An example:
<blockquote>
some text <em>more text</em> other text
</blockquote>
and let's say there's this CSS:
blockquote {
color: red;
}
...but I want the <em> to remain the normal text color (which you may not necessarily know).
Basically, would there be a way to do something like this?
blockquote em {
color: inherit-from-blockquote's-parent
}
Edit: The code I'm actually trying to get this to work on is actually a bit more complicated. Maybe this would explain it better:
This text should be *some unknown colour*
<ul>
<li>This text should be BLUE
<ul>
<li>Same as outside the UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
</ul>
ul {
color: blue;
}
ul ul {
color: ???;
}
With CSS alone, you can't refer to a parent's parent.
The thing you can do is try a mix of specific CSS selectors and markup so that the desired effect appears.
<td>
This is the enclosing element.
<ul>
<li>This is the first level UL, direct child of TD
<ul>
<li>This is the second level UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
</ul>
</td>
CSS:
td > ul
color: blue; /* this affects the "direct child" UL only */
}
You would limit the depth of style inheritance to one level, consequently the inner UL is unstyled in regard to color and gets its setup from the enclosing text.
Read more on the CSS Child Selector, and be aware that older browsers may have their quirks with them.
EDIT
For Internet Explorer 6, the child selector can be faked to some extend. Be sure to fasten seat belts (conditional comments or the like) before using this:
td ul {
color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}
This assumes "black" as the outer color. If this color value is subject to change, your are out of luck, I'm afraid. Unless you can define an expression() that is able to get the color value from the context (e.g. checking some other properties of parent elements). Or you give up and use a JS framework, as someone else has already suggested.
The wimpy solution without having to use JS would of course be:
td ul.first {
color: blue;
}
But I can see why you want to avoid that.
Use this to make sure the inherit overrides whatever else might have been setting the color:
blockquote em {
color: inherit !important;
}
Give up and use a snippet of javascript to detect the style of the parent and set it? :)
Rather than trying to force a selector to inherit font colour from its grandparent, I would suggest that you give the selector and its grandparent a shared declaration for the font colour.
Taking the blockquote example, assuming that body is the grandparent:
body, blockquote em {
color:[whatever];
}
blockquote {
color:red;
}
And in the case of the unordered lists, it would be:
body, ul ul {
color:[whatever];
}
ul {
color:blue;
}
My CSS is a bit rusty, but this should work:
blockquote {
color: red;
}
blockquote em {
color: inherit;
}
You are setting blockquotes to red, but all <em>'s that are contained in a blockquote should inherit... hmmm, should they inherit from the surrounding text, or from the blockquote?
If the above does not work as you want, then there is no way to do it with the current markup, I think. You would have to work with additional markup, or set the colour explicitltly, e.g.
blockquote em {
color: Purple;
}
Ok, the additional text with example clarifies the question a lot. And I'm affraid that what you want is not possible.
If you know the "unknown colour" you can of course repeat the color. But I think CSS needs some mechanism to add variables or references.
So you have to stick to the cumbersome:
ul {
color: blue;
}
li ul {
color: sameenvironment; /* Sorry but you have to add the specific colour here */
}
If you can change your html you could try
<li><span>This text should be BLUE</span>
<ul>
<li>Same as outside the UL</li>
<li>Same as outside the UL</li>
</ul>
</li>
and the style
li span{
color: blue;
}
EDIT
another way to accomplish this without the extra span tag:
If we assume that we have a style class (or any other selector) that defines to parent of the outer ul. We can modify the css like this:
.parentStyle,
.parentStyle li li{
color:red;
}
li{
color:blue;
}
I too had this question but after I glanced at the other answers it hit me,
body {
color : initial;
}
IE doesn't support this currently and Gecko requires a -moz-initial I believe..
body {
color : unset;
}
This one isn't quite as supported right now. I just thought I'd share my answer to this for anyone else who thinks about this.