see, i build my own website using just html and css. I'm figuring out most things on my own but i can't find a way to solve this problem, i guess because of my limited knowledge. I have this simple list:
<ul class="nav">
<li>HOME</li>
<li>GALLERY</li>
<li>PARKING</li>
<li>DOGS</li>
<li>ABOUT</li>
</ul>
I now want to change the appearance of the third item when it is clicked, therefore i somehow need to identify it, so i can stylize it like below:
.nav > li > a {
text-decoration:none;
font-size: 20px;
color: #ffffff;
}
Like in this example above, i want to stylize the appearance, but not for all items, just for one.
Can you help me out? Sorry if i wasn't clear enough..
I'd add a class to it and style based on that. No reason to get super specific with selectors here.
<li>Parking</li>
Then in your CSS you can do:
.parking:active {
...
}
You can use the :nth-child pseudo-class with the :active pseudo-class to target the third list item link:
.nav > li:nth-child(3):active > a {
text-decoration: none;
font-size: 20px;
color: #ffffff;
}
<ul class="nav">
<li>HOME
</li>
<li>GALLERY
</li>
<li>PARKING
</li>
<li>DOGS
</li>
<li>ABOUT
</li>
</ul>
Related
I've been trying to write better CSS, I've seen some Harry Roberts conferences and read about the BEM methodology.So by now what I understand in general is that:
You should keep things modular and reusable
Make custom general classes and avoid nesting
Never use ID's (or almost never)
My question refers to the second one: in the case of a list, let's say I want to edit the color for both the normal and :hover state. Should I add a custom class to each <li> element or a custom class to the <ul> and refer to the <li> inside it?
Here is an example to better illustrate what I mean.
<h3>Custom class for ul</h3>
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h3>Custom class for li</h3>
<ul>
<li class="list__element">One</li>
<li class="list__element">Two</li>
<li class="list__element">Three</li>
<li class="list__element">Four</li>
</ul>
<style type="text/css">
.list li {
color: black;
}
.list li:hover {
color: red;
}
.list__element {
color: black;
}
.list__element:hover {
color: red;
}
</style>
When you're using BEM, try applying classes to EVERY element. That way you are dealing with the same level of specificity across the board, and you won't have to deal with priority orders.
So to answer your question, having .list__element:hover is exactly what you want.
I provided a more elaborate example, to demonstrate modularization. Notice how I added a new module "utensils".
Hope this answers your question!
.kitchen {
&__utensils {
}
}
.utensils {
&__utensil {
&:hover {
}
}
}
// this gets compiled to
.kitchen
.kitchen__utensils
.utensils
.utensils__utensil
// that is exactly what you want because you are avoiding specificity. Which means you will never have to fight with your selectors, which means you will never have to use important tags.
<div class="kitchen">
<ul class="kitchen__utensils utensils">
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
</ul>
</div>
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
CSS:
// Highlight to show that the user is viewing current tab.
// css for the active tab
.HeaderTabs li.tab a {
display: block; //anchor tab
padding: 12px 8px 12px 8px;
}
.HeaderTabs li.tab a:link {
outline: none; //link works
text-decoration: none;
}
.HeaderTabs li.tab a:hover { //this works hovering over the text
color: #A4C639;
font-weight: bold;
}
.HeaderTabs li.tab a:active { //this doesnt work
color: #A4C639;
font-weight: bold;
}
:active selector comes in action when the element is active, for example when you keep an element clicked, the styles will apply, if you want to style your current active tab you need to use jQuery or server side programming for that, you can't style your current active tab by just using :active selector
More Reference
I think you might be confusing what 'active' means. ':active' in CSS refers to the state of the link when it's clicked (which can be a matter of milliseconds in some browsers). If you want to make the tab that refers to the current page look different, you'll need to add some kind of selector to it and style that differently.
The active state is set on a link when the user is clicking on it. Once the user releases the click the link is no more active. If you change the color of the active link (different color than the hover state) you will see the difference.
You should add your own "selected" class to the link once the tab is effectively selected either using JavaScript or on server-side.
I think :active only works the moment you click on the link, when you mouseUp it's not "active" anymore.
If you want that tab to keep on a color, just define another class.
.activeTab {
color: #A4C639;
font-weight: bold;
}
and throught javascript or jquery add that class to the tab.
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Read This
li class="current"
.HeaderTabs li.tab a.current {
color: #A4C639;
font-weight: bold;
}
Additionaly comments in CSS are not done with //, thats Javascript. Use /* Cooment */
EXAMPLE
HTML/MARKUP
File = index.html
<ul>
<li class="current"><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = abouts_us.html
<ul>
<li><a href="index.html"</a>Home</li>
<li class="current"><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = news.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li class="current"><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = products.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li class="current"><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = contact_us.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li class="current"><a href="contact_us.html"</a>Contact Us</li>
</ul>
STYLES/CSS
li.current
{
color: #A4C639;
font-weight: bold;
}
Aditionally you may need to give the class="current" to the <a> instead of the <li> and use
a.current
{
color: #A4C639;
font-weight: bold;
}
I have a page with a default CSS file. In this page I have:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<br>
<ul>
<li>B1</li>
<li>B2</li>
</ul>
<br>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
<br>
I can view the default CSS but I cannot amend
ul {
paddind-left:15px;
}
what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.
I have used (cssreset-min.css) but all the css was eliminated. Any help?
Give the parent ul a new class:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<ul class="newClass">
<li>B1</li>
<li>B2</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
Then do:
ul.newClass {
paddind-left:0px;
}
This will work in all browsers. If you're not concerned about that, use #Andy answer.
if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult
If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work
The nth-child selector targets specific children, in this case the 3rd and 4th
Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)
#container ul:nth-child(2) li { padding-left: 0; }
You can try something like this :
http://jsfiddle.net/4X62Y/
Here's another solution without changing the HTML:
ul:not(:nth-child(3)) {
padding-left:15px;
}
Example
This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by #Alex Thomas .