I have this markup:
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul> // w style: border-bottom: 2px solid #aaa;
<li>
<li>
</ul>
</li>
</ul>
I need to add some style to the main parent and a touch of style that will be inherited for the same item within - as above. So i do this, but it is't work...
ul {
border-top: 2px solid #aaa;
& > {
border-bottom: 1px solid #ccc;
}
}
I know that I can duplicate tag and specify a different style for him inside, but in general is the possibility of such record/write? Thx for help.
I believe your use of the nested selector is wrong, it must be throwing errors from Sass.
You have used the direct descendent selector > after the alias for the containing selector in this case the ul, so your compiled selector would look like ul > which is invalid.
The selector should follow the pattern parent > child. You may be attempting ul > ul but the nested ul is not a direct descendent of the main ul rather it is a child of li.
Your amended code:
ul {
border-top: 2px solid #aaa;
& > li > & {
border-bottom: 1px solid #ccc;
}
}
But note this rule will also apply in the following situation too, so you should probably go for a class on the nested ul.
HTML
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul> // w style: border-bottom: 2px solid #aaa;
<li>
<ul> // Another list
<li></li>
<li></li>
</ul>
<li>
</ul>
</li>
</ul>
So this would be better
<ul> // w style: border-top: 2px solid #aaa; border-bottom: 1px solid #ccc;
<li>
<ul class='sub-list'> // w style: border-bottom: 2px solid #aaa;
<li>
<li>
</ul>
</li>
</ul>
with the following css/scss
ul {
border-top: 2px solid #aaa;
}
.sub-list { /* Will inherit the above if used on a ul */
border-bottom: 1px solid #ccc;
}
Related
I have an <ul> that I have no control over (react),a nd I want to put a box and border around some of them.
Basically, I have:
<ul>
<li>Results...</li>
<li><</li>
<li>1</li>
<li>2</li>
<li>></li>
<li>Something else</li>
</ul>
Screenshot:
And I want them to be wrapped like this:
The problem like I said is that I dont have control over the actual element and the way it is being rendered, so I can't redo it with divs, and I want to wrap all li items except the first and last.
Current HTML is, the way the component renders it is :
<ul class="ant-pagination">
<li class="ant-pagination-total-text">Results...</li>
<li class="ant-pagination-prev"><</li>
<li class="ant-pagination-item">1</li>
<li class="ant-pagination-item">2</li>
<li class="ant-pagination-next">></li>
<li class="ant-pagination-options">Dropdown with options about setting table page size</li>
</ul>
The CSS that I have applied to reorder the items the way I need them displayed:
.ant-pagination {
justify-content: center;
}
.ant-pagination > li:last-child {
order: 1;
margin-left: 20px;
}
.ant-pagination > li:first-child {
order: 2;
margin: 0 auto;
}
.ant-pagination > li:not(:first-child):not(:last-child) {
order: 3;
}
This CSS reordered the items the way I need them to be:
Of course I have additional styling CSS on top of that.
.ant-pagination > li:not(:first-child):not(:last-child) this selector targets the items that I need to be targeted and want wrapped.
In essence I need to do:
<ul>
<li>Results...</li>
<div class="li-wrapper">
<li><</li>
<li>1</li>
<li>2</li>
<li>></li>
</div>
<li>Something else</li>
</ul>
.li-wrapper {
border: 1px solid black;
}
ul li {
padding: 4px;
max-width: 16px;
}
ul li:not(:first-child, :last-child) {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
ul li:nth-last-child(2) {
border-bottom: 1px solid #000;
}
ul li:nth-child(2) {
border-top: 1px solid #000;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
May be using the :not selector of CSS, like:
ul li:not(:first-child, :last-child) {
color: red;
}
Sorry for not understanding it well but I am not sure what you meant by you have no control over the elements but then you applied CSS to those elements. Anyway, wouldn't a simple border style and padding in your ant-pagination work?
.ant-pagination {
background: 1px solid black;
//or whatever padding the design says
padding: 10px;
}
I have a menu where I want to change the link color on hover, but also change all of its siblings to another color. Is this possible without JS?
HTML:
<ul>
<li>
<a>lorem</a>
</li>
<li>
<a>ipsum</a>
</li>
</ul>
SCSS:
ul {
$primary-color: orange;
> li {
> a {
color: #000;
border-bottom: solid 2px transparent;
&:hover {
color: $primary-color;
border-color: $primary-color;
& + a:not(:hover) {
color: red;
}
}
}
}
}
You can not affect the other a tags when one is hovered. Your only real option here is to apply the "other" colour when the ul is hovered, and then override the "other" colour when the link is hovered.
ul > li > a {
color: #000;
border-bottom: solid 2px transparent;
}
ul > li > a:hover {
color: orange;
border-color: orange;
}
ul:hover a {
color: red;
}
<ul>
<li>
<a>lorem</a>
</li>
<li>
<a>ipsum</a>
</li>
<li>
<a>sit</a>
</li>
<li>
<a>amet</a>
</li>
</ul>
SCSS version: https://codepen.io/3rror404/pen/OJMNyJg
How can I use triangle shape css for drop-down arrow with before after.
I have created this css
<span class="arrow-top"></span>
.arrow-top {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 35px solid #943c3c;;
}
i have also created demo.
http://trianglecss.blogspot.com/2018/06/triangle-shape-with-css.html
:before and :after are CSS pseudo classes. Think of them as new tags rendered before or after the class you are targeting. So if you have a div called .dropdown you can make an arrow before or after that div without any extra markup.
HTML:
<div class="dropdown">
My Dropdown
</div>
CSS:
.dropdown::after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 35px solid #943c3c;;
}
You'll end up needing to add additional styling to this triangle to position it, but that's the start.
I'd suggest using icon library such as fontawesome,glyphicons.
It looks better for UI design.
$('.dropdown').on('click', function(){
$(this).toggleClass('show');
})
.dropdown{
position:relative;
}
.dropdown:after{
position:absolute;
content:'';
left:80px;
top:8px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid red;
}
.submenu{display:none;}
.show .submenu{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">Dropdown
<ul class="submenu">
<li>submenu 1</li>
<li>submenu 2</li>
</ul>
</li>
</ul>
I would like to apply style to hovered links in a list, but only if there is not image inside <a> element.
The markup is like this:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
and my css:
div#leftcolumn ul a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
I have tried this css, but to no avail:
div#leftcolumn ul a:hover < img{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Here is the jsfiddle
You cannot style an element based on it's children in CSS, what you can do is assign a special class for <a> tags that hold the image and prevent styling it:
<div id="leftcolumn">
<ul>
<li>google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
div#leftcolumn ul a:not(.withImage):hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
I doubt this is possible in pure CSS.
However, you could wrap text in a <span> and only apply rules there, i.e. something like:
<div id="leftcolumn">
<ul>
<li><span>google</span></li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
CSS:
div#leftcolumn ul a:hover > span {
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
}
Updated JSFiddle
add .non-img to li which is without img
n do css with using .non-img
div#leftcolumn ul li.non-img a:hover{
background-color: #F8F8F8;
color: Black;
border-bottom: 1px solid Black;
border-top: 1px solid black;
}
<div id="leftcolumn">
<ul>
<li class="non-img">google</li>
<li><img src="http://cso.cz/wpimages/cz2.gif"></li>
</ul>
</div>
My html:
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
</div>
Css part of this html:
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.sofware {
background-color:#646464;
color: #ff7225;
}
.sofware2 {
background-color:#4d4d4d;
color: #fd205e;
}
Problem: list items which software and sofware2 ids doesn't change color. What's the problem? Something should be like this I guess I should set those colors with "UL Li:nth-child" but I'm not sure how to do that.
Thanks in Advance
the jsfiddle says it works: http://jsfiddle.net/nLWAE/1/
<ul class="tech">
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>PHP + MYSQL</li>
<li>C#</li>
<li class="software">PhotoShop</li>
<li class="software">Brackets</li>
<li class="software">Notepad++</li>
<li class="software">Sony Vegas</li>
<li class="software">eBay BlackThorne Pro</li>
<li class="software">Senuke XCr</li>
<li class="software2">X-Cart</li>
<li class="software2">EKM PowerShop</li>
<li class="software2">WordPress</li>
<li class="software2">phpBB</li>
</ul>
.tech ul {
padding: 0px 0px 0px 0px;
margin-bottom: 10px;
margin-top: 10px;
list-style:none;
list-style-position:outside;
}
.tech li{
display:inline-block;
text-align: center;
background-color: #cccccc;
color: #222222;
margin: 5px 0px 5px 0px;
border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 2px 3px 5px #000000;
border: #969696 1px dashed;
}
.software {
background-color:#646464;
color: #ff7225;
}
.software2 {
background-color:#4d4d4d;
color: #fd205e;
}
First, your CSS selectors don't match your ids. You have "software" in the id, but "sofware" in the CSS selector. But you also have duplicate ids, which is wrong.
Change your
<li id="software"></li>
<li id="software2"></li>
to
<li class="software"></li>
<li class="software2"></li>
then change your CSS to:
.tech li.software {
background-color:#646464;
color: #ff7225;
}
.tech li.software2 {
background-color:#4d4d4d;
color: #fd205e;
}