I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
Related
I have a text field that I am trying to attach focus styling to and when focused, I want the box the expand and then include an "Add" button below the text area.
Both elements are on different levels (due to the existing structure of the code base). But I can't figure out how to hide/display the button when focusing on the text area. Here's an example of what I'm working with:
<form class='container'>
<div class='form-item'>
<div class='input-container>
<textarea id='addComment'></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'></button>
</span>
</form>
And here is the CSS/SCSS I've got
#addCommentBtn {
display: none;
}
#addComment {
transition: all 0.5s ease;
margin: 0.5em;
width: 95%;
}
#addComment:focus {
height: 10em;
margin-bottom: 2em;
}
#addComment:focus + #addCommentBtn {
display: block;
}
The expansion of the textarea on focus works as intended, but getting the button the change from display:none to display:block won't seem to work (I've tried a few different variations as well such as visibility).
If it comes down to it, I may have to adjust the Vue components, but this is last resort as it would require more tweaks/confirmation from project lead as the components are used in numerous areas and changes would affect those other areas as well.
ALSO: I would prefer not to use JQuery as well.
This should fix the problem. Flex will automatically adjust the height of container based on content.
function toggleButton(showFlag) {
document.getElementById('addCommentBtn').style.display = showFlag ? "inline" : "none";
}
.container {
display: flex;
flex-direction: column;
}
#addCommentBtn {
display: none;
}
<form class='container'>
<div class='form-item'>
<div class='input-container'>
<textarea id='addComment' onfocus="toggleButton(true)" onfocusout="toggleButton(false)"></textarea>
</div>
</div>
<span class='button-wrapper'>
<button id='addCommentBtn'>Add</button>
</span>
</form>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have been trying to do this for a while and feel it should be fairly simple:
<div id = "container">
<div id = "item1" class = "item"> </div>
<div id = "item2" class = "item"> </div>
<div id = "item3" class = "item"> </div>
</div>
How can I select each item one after another and assign each a different background (without using ids)?
What I am trying to achieve:
#item1 {
background: red;
}
#item2 {
background: blue;
}
#item3 {
background: yellow;
}
<div id="container">
<div id="item1" class="item"> </div>
<div id="item2" class="item"> </div>
<div id="item3" class="item"> </div>
</div>
But isn't there a way to select each element in the #container div one by one, regardless of it's id value? By doing something such as the following :
.container:nth-child(1){ /*select first child of .conainter (#item1) ?*/
background: red;
}
or
.item:nth-of-type(2){ /*select second element of type .item (#item2) */
background: blue;
}
If you are trying to do this with only CSS:
.item:nth-of-type(1) { background: #fff}
.item:nth-of-type(2) { background: #000}
.item:nth-of-type(3) { background: #abc}
If you want to grab these after the fact using JS and/or jQuery:
jQuery(".item").each(function(i, el) {
if(i == 0) {
el.style.backgroundColor = "black";
} else {
el.style.backgroundColor = "red";
}
})
i here would be the index of your .item elements so you can target which one you need by this index (hence the conditional)
Also note that you need to set a height on the .item elements or add some content if you want to see the background color change. The height by default is 0
There are several ways to achieve this in CSS and JS. Below, is my variation I would normally use on client websites to achieve this background variation you are attempting to achieve:
#container div {width: 200px; height: 200px;}
#container div:first-child {background-color: red;}
#container div:nth-child(2) {background-color: green;}
#container div:last-child {background-color: blue;}
Im using first child and last childs on the first and last elements inside #container and then for the one in the middle i just tell the browser to find the second div inside #container.
Here is my HTML so my explination and CSS makes sense:
<div id = "container">
<div>ITS RED! </div>
<div>ITS GREEN! </div>
<div>ITS BLUE! </div>
</div>
Feel free to edit and play around with my code in a jsfiddle enviroment: https://jsfiddle.net/x9eouw7z/
For a static page you can use the :nth-child() selector like this:
https://jsfiddle.net/DIRTY_SMITH/6brcg9p7/3/
.item:nth-child(1) {
background: blue;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: green;
}
Is it possible to use normal CSS animations in angular?
I am trying just to show a div with a simple animation (the div is hide, then appears)
<div class="burguer-icon" (click)="onClick()">
<i class="fas fa-bars"></i>
</div>
<div
[ngClass]="showMenu ? 'shown' : 'hide'"
class="menu-content"
>
<div class="cross-icon" (click)="onClose()">
<i class="fas fa-times"></i>
</div>
// content
</div>
and I toggle the state, if clicked or not, in my component.ts
onClick() {
this.showMenu = !this.showMenu;
}
onClose() {
this.showMenu = !this.showMenu;
}
my css file for this component looks like this:
.burguer-icon {
background-color: orange;
}
.menu-content {
position: absolute;
top: 0px;
width: 100vw;
height: 100vh;
background-color: green;
transition: all 3s ease;
}
.show {
left: 0px;
}
.hide {
left: 90vw;
}
Why this simple animation does not work?
With angular, are you forced to use its animation strategy?
https://angular.io/guide/animations
Thanks in advance
Yes, you can use normal CSS animations. It's working fine on my end. Issue seems to be a typo in your class name show in css and shown in component html.
Update your html like:
[ngClass]="showMenu ? 'show' : 'hide'"
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.