We Keep Coding

Can I use variables or regex for selectors in CSS?

Hi,
I have this markup:
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>
I want only users that have the same room data as the div parent so I wrote this css:
span { display: none; }
[data-users="room2"] [data-room*="room2"] { display: block; }
fiddle: https://jsfiddle.net/ehpt9f5z/2/
However, since the data in the div parent can change to any room number I need a variable there so the CSS selector will always match the room data from the child with its parent, something like this:
[data-users=$1] [data-room*=$1] { display: block; }
Is it even possible with pure css?
Thank you.

This is not accomplishable with CSS alone, since there is no CSS parent selector.
A JavaScript solution would be to loop through each div which has the data-users attribute, then loop through each child of the div and show the ones whose data-room attribute contains the data-users attribute value.
const divs = document.querySelectorAll('div[data-users]')
divs.forEach(e => [...e.children].forEach(f => {
if(f.dataset.room.split(',').includes(e.dataset.users)){
f.style.display = "block"
}
}))
span { display: none; }
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>

How to check a hide an element inside element on click using jquery(not duplicate)?

I have a div with an i tag:
<div class="accordion-heading datalist" data-toggle="collapse" data-parent="#accordion2" href="##i.Id">div
<i class="fa fa-chevron-down table-middle" aria-hidden="true">i tag</i>
</div>
On first click of the div the i tag should disappear, on next click of the div the i tag should appear again. How can I do that?

You can use toggle() to achieve that:
$('.accordion-heading').click(function() {
$(this).find('i').toggle();
});
Note that depending on your styling rules, it may be hard and/or impossible to click the div element with the i hidden as it will have no height. To fix that you can set a min-height rule on the div, or put a non-breaking space ( ) in it.
I want to switch between display: none and display: tablecell
In this case you have to manage the display value yourself, like this:
$('.accordion-heading').click(function() {
$(this).find('i').css('display', function(i, d) {
return d == 'none' ? 'tablecell' : 'none';
})
});

use jquery toggle().
check this
jsfiddle

Without jQuery:
var accordion = document.querySelector('.accordion-heading');
accordion.addEventListener('click', toggleTag);
function toggleTag() {
var tagToToggle = accordion.querySelector('i');
if (!tagToToggle.classList.contains('active')) {
tagToToggle.classList.add('active');
} else {
tagToToggle.classList.remove('active');
}
}
CSS:
i {
display: none;
}
i.active {
display:block;
}

You can also use toggleClass() method but u create a css class for jquery function. its most customizeable
.display-none{display:none;} or
.display-none{opacity:0;transition:1s solid ease;}
$('.accordion-heading').on('click',function() {
$(this).find('i').toggleClass('display-none');
});
Click-Here to view example -jsbin

CSS List style type Using attribute value

I'm having some html elements like this
<div class="col-md-3">
<div class="olListPallette" data-numberStyle="counter(count, lower-alpha) '. '">type1</div>
</div>
<div class="col-md-3">
<div class="olListPallette" data-numberStyle='counter(count, upper-alpha) ". "'>type2</div>
</div>
<div class="col-md-3">
<div class="olListPallette" data-numberStyle='counter(count, lower-alpha) ") "'>type3</div>
</div>
What I'm trying to do is when a click a div, the attribute should be set to the <ol>. It has a counter in css and the new list style should be applied to the list items. Here is my list
<ol>
<li>first</li>
<li>second</li>
<li>thirs</li>
</ol>
and my js is
$('.olListPallette').click(function(){
$('ol').attr('data-numberStyle',$(this).attr('data-numberStyle'));
});
my css:
ol {
list-style: none !important;
counter-reset: count;
}
ol li:before {
content: attr(data-numberStyle);
counter-increment: count;
}
The problem is the attribute data-numberStyle doesn't get the counter value. If I give the value directly like content: counter(count, lower-alpha) ") " then it will work. But I need to use the attribute value in css.
Also, In other cases I need to use only separator. So, If I use the counter in css, I need to pass the separator.
Example:
content: counter(count) + attr(data-numberStyle); // this is not working
// Something like this counter(count) + ", ".
// <div data-numberStyle = ", ">
Here is my Fiddle. If my question is unclear, feel free to ask. I hope you understand. How to use this attribute value in CSS?

Given that data attribute should be a style, An idea comes to mind, it is to modify a 'style' tag directly in the header to apply :before css, please check the updated Fiddle sample:
http://jsfiddle.net/cHhJ5/3/
Javascript:
var $style;
$(document).ready(function(){
$('.olListPallette').click(function(){
if(!$style){
$style = $('<style id="listStyle">ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
$("head").append($style);
}else{
$style.html('ol li:before {'+$(this).attr("data-numberStyle")+' ";}</style>');
}
});
});
Hope it helps
Edit (Explanation):
:before (and others pseudo-selectors like :after) can't be modified directly with jQuery because there aren't part of the DOM.
So, a possible workaround may be to modify directly a style tag in header to accomplish the purpose of modify the list style.
However, I feel that it's a bit hackish to add a style tag in header and put styles directly in data attribute, I'd rather prefer to use predefinied css classes and assing them through javascript:
http://jsfiddle.net/cHhJ5/4/
Html, use a class name as a data attr. value:
<div class="olListPallette" data-numberStyle="low">type1</div>
Css, define classes with desired styles:
ol.low li:before {
content: counter(count, lower-alpha) ") ";
counter-increment: count;
}
ol.upp li:before {
content: counter(count, upper-alpha) ") ";
counter-increment: count;
}
Javascript, just set related class on click:
$(document).ready(function(){
$('.olListPallette').click(function(){
$("ol").removeClass();
$("ol").addClass($(this).attr("data-numberStyle"));
});
});

how to hide image by its icon-value

hi everyone i cant find the solution for my question on google. i just want to hide the images using there icon-value
like in the below example i just want to hide the image which have icon-value="1" in the div which have .box class
<div class="box">
<div class="icon"><img src="xyz/smiley.png" icon-value="1" icon-index="0"></div>
<div class="icon"><img src="xyz/1.png" icon-value="2" icon-index="1"></div>
</div>

use an attribute selector.
.box img[icon-value="1"] {
display: none;
}

CSS solution:
.box img[icon-value="1"] {
display: none;
}
Demo
PS: Notice the value in quotes. I don't think CSS attribute selectors will work if the value is not specified in quotes
jQuery solution:
$(".box img[icon-value=1]").css("display", "none");
Demo

using css try following
.box .icon img[icon-value="1"] {
display: none;
}
or if you are using jquery you can try this also
$(".box img[icon-value=1]").hide();

Text Rollover Effect without Images

I have a phone number link at the top of my website, the number is 1300 GO POOPIES. (for example purposes :P)
<h1 class="phone-text">
1300 GO POOPIES
</h1>
So basically, when a person puts their mouse over the 1300 GO POOPIES it changes to 1300 46 7667437.
I don't want to use an image however as I want to preserve the click-to-call functionality.
I tried to do something with CSS, with minimal success however.
.phone-text::after {
content: "1300 GO POOPIES";
}
.phone-text:hover:after {
content: "1300 76 67437";
}
not sure if this is out of the boundaries of css, and needs java...

You don't even need to load jQuery or JS.
CSS+HTML only.
FIDDLE

If there is a reason for you avoiding JavaScript, then this can be achieved with just CSS if you're willing to add some extra markup. You do so by putting two elements inside the <a> tag, one with the numeric number, one with the alphanumeric number. Then you can hide/show them independently with a:hover selectors.
HTML
<h1 class="phone-text">
<a href="tel:+6113007667437">
<span class="letters">1300 GO POOPIES</span>
<span class="digits">1300 76 67437</span>
</a>
</h1>​
CSS
.phone-text a .digits,
.phone-text a:hover .letters {
display: none;
}
.phone-text a .letters,
.phone-text a:hover .digits {
display: inline;
}
jsFiddle

You want something a little more in depth... Here goes.
Html
<a href="tel:+6113007667437">
<div id="hide">
<h1>1300 76 67437</h1>
</div>
<div>
<h1>1300 GO POOPIES</h1>
</div>
</a>
And your css
div{
position:absolute;
background:#ffffff;
}
div#hide:hover{
display:none;
}

How about this http://jsfiddle.net/tzerb/S52bz/
< a class="phone-text" href="tel:+6113007667437" >< /a >

here you have a variation to the solution proposed by yaponyal. it works without the > sign.
.hiden {
display:none;
}
a:hover .shown {
display:none;
}
a:hover .hiden {
display:inline;
}
​

Try this:
$('a').hover(
function(){
$(this).text('1300 76 67437')
},
function(){
$(this).text('1300 GO POOPIES')
}
});