I've tried appending "group-hover" to the P tag to get the red text to hover on devices that allow for hover states but with no success. The basic markup for my problem looks like this...
<div id="card" class="group">
<p class="text-blue-400 [#media(hover:hover){&:hover}]:text-red-400">
Here is placeholder text.
</p>
</div>
How can I use "group-hover" so the red text will show on the hover state on devices that allow for hover?
<div id="card" class="group">
<p class="text-blue-400 group-hover:text-red-400">
Here is placeholder text.
</p>
</div>
More info: Tailwind CSS Handling Hover
Update
Be aware that Tailwind 3.1+ is required to use inline media queries
You have 3 options:
1. Allow future flag
Since version 4, this behavior you want to achieve will be default, but you can enable it already:
module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
}
2. Inline
This is tricky one, since you can't use whitespace inline media query, so you probably have to use group-hover anyway (because [#media(hover:hover){.group:hover}]:text-red-400 will not apply to all cases); version 3.1+ needed:
<div id="card" class="group">
<p class="text-blue-400 group-hover:[#media(hover:hover)]:text-red-400">
Here is placeholder text.
</p>
</div>
3. Theme Extend
This is also not best solution, because there is no way to select the parent of an element, but it some cases it would work) - highly not recommend this
module.exports = {
theme: {
extend: {
screens: {
'mygroup-hover': { 'raw': '(hover: hover) {.group :hover}' },
},
},
}
}
<div id="card" class="group">
<p class="text-blue-400 mygroup-hover:text-red-400">
Here is placeholder text.
</p>
</div>
Related
I want to hide all the elements on the page, but only show the contents of div.k1. There are many more elements on the page. How do i do it in pure CSS?
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
<div>1-this will hidden</div>
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div> 11,12,13..
If all the elements you want to hide are div's that are directly within the body you can do something like the following.
var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
Basically what this does is select all the div elements that are directly within the body that do not have the class k1. Then it does a for loop on those items and sets each item to not display.
For a CSS solution you could just do something similar if the conditions are the same as I mentioned above.
body>div:not(.k1) {
display: none;
}
If you are interested in learning more about CSS selectors I'd encourage you to take a look at the W3 schools page on it.
Here's a crude way of doing this for divs nested up to 2 layers deep (as in your example). As you can see here, the problem is hiding all divs based on the tagName ('div'), unless they either have the className "k1" or are children of a div with that className. So we actually have to check at least 3 conditions before applying the hidden property. You can, of course, go deeper, if needed, by adding parentNode.parentNode.parentNode... and so on. But I would almost certainly approach this instead by assigning a class to the elements I want hidden, with an ID on the one I want to reveal. This is just a way of doing the job without changing any of your html.
const allDivs = document.getElementsByTagName('div');
for (let i = 0; i < allDivs.length; i++) {
if(allDivs[i].className !== "k1" && allDivs[i].parentNode.className !== "k1"){
if (allDivs[i].parentNode.parentNode.className !== "k1"){
allDivs[i].hidden = true;
}
}
};
<div class="k1">
2-this div will displayed
<p>3-this will displayed</p>
<p>4-this div will displayed</p>
<div>
5-this will displayed
<p>6-this will displayed</p>
<div>
7-this will displayed
<p>8-this will displayed</p>
</div>
</div>
</div>
<div>9-this will hidden</div>
<div>10-this will hidden</div>
Cheers!
I am trying to style the .md-input-element on md-input which is added by default from angular-material.css which seems I cannot get to work. I cam trying to add the letter-spacing style but it only works as the current. style on the console. Is there any way to override this particular style for md-input-element in my own css file?
My html code is as below :
<!-- Input Name* -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
<div class="name-padding">
<md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name"
[(ngModel)]="outlet.name">
<md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint>
</md-input>
</div>
</div>
</div>
css :
.md-input-element {
letter-spacing: 0 !important;
}
If you set the style in the component that contains the mentioned html code, then it will not work because of the standard ViewEncapsulation. The default ist Emulated and will change your CSS-selector to something like the following during runtime:
.md-input-element[_ngcontent-xsa-40] {
{
letter-spacing: 1px;
}
This selector will not match with class="md-input-element" of the md-input because of the attached attribute.
Now you have three options
Use /deep/: You can rewrite your selector using deep. E.g. :host /deep/ .md-input-element to stop Angular2 adding the cryptic attribute to your selector.
Change ViewEncapsulation: You can change your ViewEncapsulation to None to stop Angular2 adding the cryptic attribute to your selector.
Global style: Add the style to a global style.css to get around the ViewEncapsulation
Look here for more information about styling your components https://angular.io/docs/ts/latest/guide/component-styles.html
try with below selector
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
letter-spacing:0!important;
border-color: orange;
}
I want to assign a div to the tooltip content. One way is to have a inline div as given in the example in website:
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>')
});
});
However what I want is to have div seperately define like:
<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span>
and then define content as
$(document).ready(function() {
$('#my-tooltip').tooltipster({
content: $($('#abc').html())
});
});
The reason I want to do this is because I am making dynamic css changes to '#abc' and everytime the tooltipster shows I want recent css changed to be incorporated.
thanks
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.children().html());
continueTooltip();
}
});
For me worked that improved version :)
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.next().contents());
continueTooltip();
}
});
That is even better! :) But make sure your tooltip content is just after your selector here .tip follows after div#my-tooltip and also is its child.
In addition to having the content be separately defined, I wanted the content for the tooltip to be nested inside the element that is clicked/hovered. I found the functionBefore option worked for me.
The markup might be:
<div id="my-tooltip">
click/hover me to show a tooltip
<div class="tip" style="display:none">
tooltip<br>content
</div>
</div>
And the js:
$('#my-tooltip').tooltipster({
functionBefore: function(origin,continueTooltip){
origin.tooltipster('content',origin.find('.tip'));
continueTooltip();
}
});
If my div is like this: <div class="form-item-field-afl-dienst-adressen-und-0-street"> is it possible to call it in my css with just a fraction of it? Like .form-item-field-afl-dienst
The ending 0 is the number of items on the page, which is not predefined... And I want to catch them all in one css statement..
Or, how can I catch
<div class="form-item-field-afl-dienst-adressen-und-0-street">
<div class="form-item-field-afl-dienst-adressen-und-1-street">
<div class="form-item-field-afl-dienst-adressen-und-2-street">
<div class="form-item-field-afl-dienst-adressen-und-3-street">
...
with one statement?
EDIT FOR ALEX
<div class="form-item-field-afl-dienst-adressen-und-0-street">
<div class="form-item-field-afl-dienst-adressen-und-0-nr">
<div class="form-item-field-afl-dienst-adressen-und-0-zip">
<div class="form-item-field-afl-dienst-adressen-und-1-street">
<div class="form-item-field-afl-dienst-adressen-und-1-nr">
<div class="form-item-field-afl-dienst-adressen-und-1-zip">
This selector should work.
[class^="form-item-field-afl-dienst"]
Note older IEs don't support this.
No, but you can have multiple classes:
<div class="form-item-field-afl-dienst adressen-und-0-street">
Then have:
.form-item-field-afl-dienst
{
}
.adressen-und-0-street
{
}
Edit: new browsers will support selectors as alex pointed out, but for now if you want it to work with most browsers currently in use, it's not possible.
you may want to split the class items up:
<div class="form-item field-afl 0-street">
Then for the combined you can use the CSS:
.form-item .field-afl .0-street
{
...
}
and to use a segment of the class in CSS:
.form-item
{
...
}
I am using jPlayer for a client, where the progress bar is the title of the track. It changes color as the track progresses. I'm accomplishing this by having a div with the title in one color, and absolutely positioning the progress bar on top of it, with the title in another color. So as the progress bar expands, it reveals the new colored text. In case my description is terrible (I'm sure it is), you can take a look at the dev site here:
http://sublimio.matthew-ferry.com/sublimio/
As you can see, the progress works just fine on single word titles. But on multiple word titles, the first word reveals fine, then for the subsequent words they aren't displayed until the whole word is finished.
Is this a browser rendering problem or is there something I could do to fix this?
first the js:
$('.track').each(
function()
{
var player_id = '#' + $('.jp-jplayer', this).attr('id');
var audio_id = '#' + $('.jp-audio', this).attr('id');
$('.jp-jplayer', this).jPlayer(
{
"cssSelectorAncestor": audio_id,
swfPath: "js",
supplied: "mp3",
wmode:"window"
}
);
$('.song', this).click(
function(eve)
{
eve.preventDefault();
$(this).jPlayer("progress");
$('.jp-jplayer').jPlayer("stop");
$(player_id).jPlayer(
"setMedia",
{
mp3: $(this).attr("href")
}
);
$(player_id).jPlayer("play");
return false;
}
);
}
);
Now the (simplified) HTML:
<ul>
<li class="track">
<div>
<div class="jp-controls">
<span><a class="jp-play song" tabindex="1">play</a></span>
<span><a class="jp-pause" tabindex="1">pause</a></span>
</div>
<div class="title">Title With Multiple Words</div>
<div class="progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">Title With Multiple Words</div>
</div>
</div>
</div>
</li>
...etc...
</ul>
Ha, figured it out. The progress bar at 0% width was wrapping the overflow text onto multiple lines. Fix was using white-space: nowrap; on the progress bar text