Why is the 3rd a element not in lightgreen color?
<html>
<style type="text/css">
div.poncho {
background-color: #555;
font-size: 200%;
padding: 1em;
}
div.poncho a[poncho] {
color: bisque;
}
div.poncho a:first-child {
color: darkcyan;
}
div.poncho a:last-child {
color: lightgreen;
}
</style>
<body>
<div class="poncho">
<a poncho>poncho 1</a>
<br>
<a poncho>poncho 2</a>
<br>
<a poncho>poncho 3</a>
<br> <!-- if removed, it works as expected -->
</div>
</body>
in this case you can use :last-of-type Selector.
<html>
<style type="text/css">
div.poncho {
background-color: #555;
font-size: 200%;
padding: 1em;
}
div.poncho a[poncho] {
color: bisque;
}
div.poncho a:first-child {
color: darkcyan;
}
div.poncho a:last-of-type {
color: lightgreen;
}
</style>
<body>
<div class="poncho">
<a poncho>poncho 1</a>
<br>
<a poncho>poncho 2</a>
<br>
<a poncho>poncho 3</a>
<br> <!-- if removed, it works as expected -->
</div>
</body>
:last-child means exactly what it says.
Since your <a> has a <br> after it, it isn't the last child.
the pseudo-selector you should be using is
https://css-tricks.com/almanac/selectors/l/last-child/
Using :last-of-type is very similar to :nth-child but with one
critical difference: it is less specific. In the example above, if we
had used p:nth-last-child(1), nothing would happen because the
paragraph is not the last child of its parent (the ). This
reveals the power of :last-of-type: it targets a particular type of
element in a particular arrangement with relation to similar siblings,
not all siblings.
Related
I am having two hover classes as shown
.Link2:hover{
color:black;
}
.Li2:hover{
background-color: white;
border-color: white;
}
Here is the JSX part:
<ul>
<li className={classes.Li1}>
<Link onClick={this.menuDisappearHandler}
to='/buyer'
className={classes.Link1}>I want to Buy
</Link>
</li>
<li className={classes.Li2}>
<Link onClick={this.menuDisappearHandler}
to='/seller'
className={classes.Link2}>I want to Sell
</Link>
</li>
</ul>
I want both hover classes to execute when I hover over Li2. How can I achieve it?
How to affect other elements when one element is hovered
You could do this for example if they are next to each other in HTML.
.Li2:hover {
background-color: blue;
border-color: white;
}
.Li2:hover + .Link2 {
color: red;
}
I cannot seem to override a specifity, would you please help me figure it out?
I even tried to use !important as a desperate move which did't work...
Conclusion, I am missing something fundamental and my old friend google isn't helping much.
The element targeted in the full code below is :
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
The color of all elements is set to white.
The targeted el needs to be : rgb(25,2,80) :
nav.nav-bar ul.group-one li.mid-el a#mid-a {
color: rgb(25,2,80);
}
A detailed explaination would be much appreciated.
Thank you for your time.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.nav-bar ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li, a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
nav.nav-bar ul.group-one li#mid-el a {
color: rgb(25,2,80);
}
<body>
<header>
<nav class="nav-bar">
<ul class="group-one">
<li><a href="/">
<div>
<img class="logo-img" src="#" alt="Logo-B&D">
</div>
</a></li>
<li>Groupe</li>
<li>Expertise</li>
<li>Référence</li>
<li>Actualités</li>
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
<li class="right-group">Rejoignez-nous</li>
<li class="right-group">Blog</li>
<li class="right-group">Finance</li>
<li class="right-group"><a href="#">
<div class="sm-icon">
<img src="" class="t-icon" alt="Twitter">
<img src="" class="i-icon" alt="Insta">
<img src="" class="f-icon" alt="Facebook">
<img src="" class="y-icon" alt="Youtube">
</div>
</a></li>
</ul>
</nav>
</header>
</body>
Change your CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.group-one {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
.group-one #mid-el a {
color: rgb(25, 2, 80);
}
Also HTML has some ending tags problems
<nav className="nav-bar">
<ul className="group-one">
<li>
<a href="/">
<div>
<img className="logo-img" src="#" alt="Logo-B&D" />
</div>
</a>
</li>
<li>
Groupe
</li>
<li>
Expertise
</li>
<li>
Référence
</li>
<li>
Actualités
</li>
<li id="mid-el">
<a id="mid-a" href="#">
Contact
</a>
</li>
<li className="right-group">
Rejoignez-nous
</li>
<li className="right-group">
Blog
</li>
<li className="right-group">
Finance
</li>
<li className="right-group">
<a href="#">
<div className="sm-icon">
<img src="" className="t-icon" alt="Twitter" />
<img src="" className="i-icon" alt="Insta" />
<img src="" className="f-icon" alt="Facebook" />
<img src="" className="y-icon" alt="Youtube" />
</div>
</a>
</li>
</ul>
</nav>
you are not using CSS selectors right, if are using a class name in a selector than dont use the tag name with it like you wrote: nav.nav-bar and nav.nav-bar ul.group-one li.mid-el a plus you gave your <li> tag an id not a class so id in css selector is used by a # not a . thus, the css selector should be written as .group-one #mid-el a
The problem comes from your selector nav.nav-bar ul.group-one li.mid-el a#mid-a {}.
Specifically there is no li element with a class of "mid-el". Instead it has an ID of "mid-el". Simply change the period in the selector to a #.
nav.nav-bar ul.group-one li#mid-el a#mid-a {color: rgb(25,2,80); }
I am trying to remove an underline from links on a website. I tried to use "text-decoration: none;" but it wouldn't work. What syntax did I do wrong? or is there a better way to remove the underline?
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
You should use
a {
text-decoration: none;
}
in your stylesheet. text-decoration is what adds the underline, and this code removes it.
Side Note: Also, you should not be using the <font> tag, as it is obsolete. You should be using classes.
Try this:
<head>
<style>
font {
color: #ff9600;
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
check it out hope it would work..[![
<head>
<style>
font {
color: #ff9600;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
</body>
]1]1
Just move text-decoration: none; from font CSS to anchor tag a CSS. Will resolve your issue. Thanks
a {
text-decoration: none;
}
a {
text-decoration: none;
}
font {
color: #ff9600;
}
<a href="index.html">
<font>Home</font>
</a>
<a href="watch.html">
<font>Watch</font>
</a>
<a href="info.html">
<font>Info</font>
</a>
The reason that your code still has an underline, is because the Anchor tag <a> by default add the underline decoration to everything inside the tag. So you will have to apply the style to the "a" instead of the font - even though the font is inside the anchor.
<style>
a {
text-decoration: none;
}
</style>
I have a sortable set of pictures, implemented with jQuery UI. I would like to have each of the pictures within a box and with a caption at the top. The boxes and their captions should not move when pictures are sorted. Is there an easy way to do this?
EDIT: I have been investigating a bit and I found an approach that could do the trick. It consists on locking down some items on their locations using
class: static
(see the second answer to this question) and this demo.
Unfortunately, when I insert images into the list, it does not work well anymore: demo.
It looks like what you need is a combination of draggable and droppables widgets rather than sortable. I'd call it "swappable" :P
You can achieve this by swapping the images on drop event as shown below:
$("#swappable img").draggable({
revert: "invalid",
zIndex: 1
});
$("#swappable .placeholder").droppable({
snap: true,
snapMode: "inner",
drop: function(event, ui) {
var $existing = $(this).find("img.ui-draggable");
if ($existing)
/* droppable already contain an image, append it to the parent of
dropped item. */
ui.draggable.parent().append($existing);
ui.draggable.css({ // reset the positioning applied by widget
top: 0,
left: 0
}).appendTo(this);
}
});
#swappable {
list-style-type: none;
margin: 0;
padding: 0;
}
#swappable li {
border: 1px solid black;
background-color: cream;
}
#swappable li span {
/*style anyway you want*/
}
#swappable li img {
width: 50px;
height: 50px;
}
#swappable li .placeholder {
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
background: #eee;
}
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="swappable">
<li>
<div class="placeholder">
<img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<span>
Item Description 1
</span>
</li>
<li>
<div class="placeholder">
<img src="http://i49.tinypic.com/28vepvr.jpg" />
</div>
<span>
Item Description 2
</span>
</li>
<li>
<div class="placeholder">
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
<span>
Item Description 3
</span>
</li>
</ul>
The following little code did the trick:
HTML
<div class="sortableDiv">
<ul id="sortable">
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s">
<image src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ0wAliOPQ_saAtWhNhhPajglDjIZVrnO19MXaYS0Doum-yztJ_CA"/>
</span>
</li>
</ul>
</div>
<div class="contentDiv">
<ul id="content">
<li class="ui-state-default">
Item Description 1
</li>
<li class="ui-state-default">
Item Description 2
</li>
<li class="ui-state-default">
Item Description 3
</li>
</ul>
</div>
CSS
.sortableDiv,.contentDiv {
float:left;
}
#content {
list-style-type:none;
line-height:88px;
margin:0;
padding:0;
}
#sortable {
list-style-type:none;
margin:0;
padding:0;
}
#sortable li {
padding-left:2em;
width:65px;
margin:5px;
}
#sortable li span {
position:relative;
margin-left:-1.3em;
}
image {
height:100px;
width:100px;
}
JQuery
$(function() {
$( "#sortable" ).sortable();
});
And some CSS given in the demo link.
DEMO
Updated DEMO
Updated DEMO-1
I am trying to use two Twitter Bootstrap navs on the same page. I have written some css to style them. Problem is, I want the css to apply to just one of the navs. I tried to use css ids to distinguish the two navs, but am having trouble getting the selectors right. Can anyone help?
Here's a simplified version of what I'm trying to do: http://jsfiddle.net/XVReX/
HTML:
<div id="something" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
#something.navbar #something.navbar-inner {
padding: 0;
background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);
}
#something.navbar #something.nav li a {
font-weight: bold;
text-align: center;
color: #FFE2E0;
text-shadow: 0 1px 0 #000;
;
}
#something.navbar #something.nav li a:hover {
color: #fff;
}
Thanks!
The selectors are more complicated than necessary and the syntax is incorrect - you can override bootstrap.css by instead using:
#something .navbar-inner { }
#something .nav li a{ }
#something .nav li a:hover { }
jsFiddle
I rewrote the entire style sheet to apply the style only on those elements with a class name .bootstrap using sass compiler and regular expression which looks like this
audio.bootstrap:not([controls]) {
display: none;
}
html.bootstrap {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a.bootstrap:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I haven't checked everything but I think it works alright.
http://jsfiddle.net/Lc5h6/