There is a list of elements where I want to apply a style for all the elements starting from the second one and another style for the first one.
To apply for the first one it's working first-of-type:bg-red-500 but how to apply a style to the other ones?
It seems that :not(first-of-type:bg-blue-500) does not work.
It is not possible at this moment in Tailwind, see pseudo class reference for a list possible variants.
In your specific case you might want to use first (or first-of-type) modifier like that:
<div>
<div class="first:bg-blue-500 bg-red-500">First</div>
<div class="first:bg-blue-500 bg-red-500">Second</div>
<div class="first:bg-blue-500 bg-red-500">Third</div>
</div>
Alternatively what you can do is to apply needed styles through js by looking at the index of the element, for example if you have list of elements in React:
<div>
{list.map((item, index) => (
<div
key={index}
className={index === 0 ? 'bg-blue-500' : 'bg-red-500'}
>
{
// ...
}
</div>
))}
</div>
Related
I have a website I am trying to do something like this, when I click on 1, I want the background of this element to change to white and when I click on the second one the background of the first one will disappear and pass to the next one...I have been trying to do this for a long time help me I don't know how to do it
<div class="oval">1</div>
<div class="oval">2</div>
<div class="oval">3</div>
When we need make "something" exclusive we use one unique variable
selectedIndex:number=-1
If you want not unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=2">
3
</div>
If you want unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=selectedIndex==0?-1:0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=selectedIndex==1?-1:1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=selectedIndex==2?-1:2">
3
</div>
NOTE: I use [class.selected], so we use a .css
.selected{
background:red;
}
You can use style.background or style.background-color using (condition)?value:null, e.g., for the first div
[style.background]="selectedIndex==0?'red':null
Like #Kwright02's comment you can do it with css:
.myclass:focus {
background-color: green;
}
But important: The element must be focusable. So a div isn't, a button is as example.
Second way (add a click handler and change the background directly):
// HTML
<div (click)="onClick($event)">test</div>
// Code
onClick(event: any) {
event.target.style["background-color"] = "green";
}
Note: This is not the way to go in Angular. Here use property binding and bind a style to a condition as example.
Instead of add a click listener to each control you can use Angular's HostListener like this:
#HostListener("document:click", ["$event"])
onAllClick(event: any) {
event.target.style["background-color"] = "green";
}
Is there a selector that can select all elements with a certain color? I want to change all text with color: #1a0dab to color:00b0f4.
If the styles are defined inline, you can do this:
[style*="#1a0dab"] {
color: #00b0f4 !important;
}
Demo:
[style*="#1a0dab"] {
color: #00b0f4 !important;
}
<p style="color: #1a0dab">paragraph 1</p>
<p>paragraph 2</p>
<p style="color: #1a0dab">paragraph 3</p>
There's no pure CSS way of doing this if the original styles aren't defined inline.
If you have access to JavaScript, you can do something like the following, though performance will probably be poor if your page has a lot of elements or you need to run the function frequently:
[...document.querySelectorAll('*')]
.filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
Note that you need to use the RGB representation, not the hex version, to check equality.
Here's a demo of the latter approach:
[...document.querySelectorAll('*')]
.filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
.forEach(el => el.style.color = '#00b0f4')
.has-color {
color: #1a0dab;
}
<p class="has-color">paragraph 1</p>
<p>paragraph 2</p>
<p class="has-color">paragraph 3</p>
There is no such selector available in Javascript/jQuery. Perhaps you can:
1 - Update the CSS files and find/replace all instances instead
2 - Add a class to all the required elements and then use the class to target them.
You should make a list of all the tags you need to change color and then with jquery give a unique color change order
I have a problem about the css selector. I want to select content of div.main-list in the pages which have not h3.subcategory-heading but not all pages.
for exemples:
page1.html:
<h3 class="subcategory-heading">BOOTS</div>
<p>add</p>
<span>.....</span>
.
.
<div class="main-list">list of product</div>
page2.html:
<p>add</p>
<span>.....</span>
.
.
<div class="main-list">list of product</div>
I want that the programme return content of div.main-list of page2.html but not div.main-list page1.html
Give an id or unique selector to some parent of .main-list on page2.html.
For eg, if you give <body id="page2">
Now if you want to apply the style, proceed like this:
#page2 .main-list {
...
...
}
If you want to select the elements for some manipulation by js,
const page2 = document.getElementById('page2');
const elements = page2.querySelectorAll('.main-list');
This should do the trick! Cheers!
I use css selector tester of google plugins and use this selector css in jsoup of java to return a content of div.main-list. So i want to return the content of div.main-list which have not h3.subcategory-heading, only one a selector css.
How to specify className attribute for div which contains 'hello world':
<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />
One way is to set is to outer div like so:
<div dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} className='class-name'/>
and then in css style the child:
.class-name div {
(css stuff here)
}
But I want to set className directly to the div with 'hello world'
EDIT: Adding class name to injected html does not solve the problem, for example:
let content = '<div class="class-name">hello world</div>'
<div dangerouslySetInnerHTML={{__html: content}}
does not work, because in case same content is used many times then CSS collisions occur (I am using style-loader with CSS modules on)
I came across this question after 2 years and I wanted to achieve the exact same results. I didn't find any accurate answers here but I came up with a solution thanks to #jash8506 due to the brilliant answer to this question.
We have to utilize two react hooks
useRef
useLayoutEffect
According to the documentation basically, useRef can be used to access the DOM elements in React and useLayoutEffect can be used to read layout from the DOM and synchronously re-render.
We can access the firstChildElement in the container div and add classes to it's classList
Here is how the completed code looks like
const containerRef = useRef();
useLayoutEffect(()=>{
if (containerRef.current){
containerRef.current.firstElementChild.classList.add('class-name');
}
});
return (
<div ref={elRef} dangerouslySetInnerHTML={{__html: '<div>hello world</div>'}} />
)
<div className="post-excerpt" dangerouslySetInnerHTML={{ __html: post.excerpt}}/>
I need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.