I would like to reuse given css formatting .parsley-errors-list > li and apply it to different HTML element than it it designed to be used for. I would like to apply it to <span> in order not to create another duplicated style and to be sure that span will always be of the same style as .parsley-errors-list > li.
.parsley-errors-list {
display: none;
margin: 0;
padding: 0;
}
.parsley-errors-list > li {
font-size: 12px;
list-style: none;
color: #f05050;
}
EDIT:
Given CSS sample is part of an updatable theme, so I would like to avoid changing it for the maintainability.
That's very easy to do. Just put a comma on the CSS selector like this:
.parsley-errors-list > li, span {
font-size: 12px;
list-style: none;
color: #f05050;
}
Related
Based answers to other questions, ie Link inside a button not working in Firefox, HTML5 disallows <a> in <button> and <a> in <a>, etc. I have a design (no pushback permitted) which has a row of three clickable tabs which switch the content displayed - on two of them when active there are two arrows at either end which paginate the tab. Quick mockup:
How can I nest clickable targets using correct HTML5 markup and proper interactive elements?
There are many ways to make, for example, <div>s clickable. I'm asking about a HTML5 solution, not a JS hack.
What I would do is have the tabs as part of a unordered list, each with <a> tags within. For the one(s) needing arrows include additional <a> tags within the <li>, and use CSS to position them above the primary <a>.
ul {
line-height: 2em;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
ul > li {
position: relative;
width: 10em;
padding: 0;
margin: 0;
display: inline-block;
}
ul > li > a {
text-decoration: none;
color: green;
border: 1px solid green;
display: block;
}
ul > li > a:hover {
background-color: lightgrey;
}
ul > li > a.back, ul > li > a.next {
position: absolute;
top: 0;
width: 2em;
color: darkgreen;
border-color: darkgreen;
}
ul > li > a.back {
left: 0;
}
ul > li > a.next {
right: 0;
}
<ul>
<li>One</li>
<li>Two<></li>
<li>Three</li>
</ul>
One possible solution - <label> is an interactive tag which expressly allows interactive content (intended for form elements). The <label> could set values of a hidden radio element which can be used via CSS or JS to pick which tab content to display, while (potentially) allowing nested <a> tags inside for prev/next.
I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS. However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists! How do I get round this? I've tried ID tags but I don't know if they overrule applying a certain style to all lists? This is my CSS code:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All lists on the page are 'standard' lists, i.e. they are all bog standard <ul> or <ol> with no id tags - apart from the navigation bar list, which I have called 'menubar'.
For the menubar styles you need to apply the id like #menubar also for its child elements if you only want them to apply inside the menubar
see example:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li {
float: left;
}
#menubar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul id="menubar">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
<ul>
<li><a>normal one</a></li>
<li><a>normal two</a></li>
<li><a>normal three</a></li>
</ul>
the problem with your CSS is that you apply styles to all 'li' and 'li a' elements. The best way to get this to work is to be a bit more specific to where you want to apply the CSS.
Try the following (using your code above).
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li{
float: left;
}
#menubar li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
If you don't specify an ID or a class the style will affect every matching element.
In your example, you style elements with the id "menubar", and then you style ALL "li" elements and lastly all "li" and "a" elements.
If you wish to apply your style only to items in your navigation menu, you could give them a class like "nav_menu", and write the style like this:
.nav_menu {
float: left;
}
.li_and_a {
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
so your list items with the float now need the class "nav_menu" and the list items and the a items need the "li_and_a" class.
Doing this will not impact any other "li" or "a" elements on your page unless they have that specific class.
There are several ways to resolve this, but I think that at this point, the most practical way would be to use the :not() selector with your lists and exclude the #menubar.
For example, if your #menubar is a id for a li, you could add it like this:
li:not(#menubar) {
/* your css */
}
li:not(#menubar) a {
/* your css */
}
EDIT 28/02
My understanding is that you have your horizontal bar with the #navmenu and the rest of your CSS you do not want to take effect in it.
If that is what you want, this solution does work. As it was tested on jsfiddle.
https://jsfiddle.net/a2kj8vds/
I am a developer and I don't know CSS properly. Here I am stuck with a simple problem. I am using Sitefinity CMS for development. I one of the page I used ul and li. CSS given by designer for li is as below
.listing li {
list-style: circle url(/images/default-source/main_library/bullet.gif?Status=Temp&sfvrsn=2);
margin-bottom: 7px;
}
I just copied his HTML into my page but I observed li bullets are not at the same position as designer gave. I used Developers Tools and inspected. My CMS adding its own style to li as below
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
When I disable padding: 0; then it appears to be at desired position. But how can I disable padding: 0; from development environment. Means any CSS that can remove padding: 0; effect?
You need to apply padding-left: 20px; to the ul.
Add this to your css:
.listing { padding-left: 20px; }.
Edit: looks like you already have styles defined for .listing, so just append that to the .listing block, I believe it's line 730 in common.css.
The more accurate the selector, the more precedence it has.
ul li { padding:5px; }
#my-Div div.another-div ul li { padding:0px; }
In this example, the more specific li element will use the 0px padding instead of the 5px. You can also add !important after an attribute if you need to ultimately override and existing style on an element.
ul li { padding:0 !important; }
I have one CSS file which I found it in one website, but I have a confusion about it. The code is:
ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}
So, what I am styling here? as I know, it should be (( a )) tag, so if I add
display:inline-block;
to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.
Maybe I will have one more question later, but for timing i want to understand the code and correct my information.
Best regards and thanks in advance,
Gharib
edit:
I want to use both inline-block and block, and here is my full code:
ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}
and the html is something like:
<ul class="ablock">
<li><div align="center">Find</div></li>
</ul>
<ul class="aninline">
<li><div align="center">Back</div></li>
<li><div align="center">Next</div></li>
</ul>
The above selector will target all a elements which are nested under li which is further nested under ul, that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like
ul.class_name li a {
/* Styles goes here */
}
The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name
As you commented, it seems like you want to target a ul element, now instead of using something like
ul {
/* Styles goes here */
}
Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like
ul.class_name {
/* Styles goes here */
}
Or you can also use a nested selector like
div.wrapper_div ul {
/* Styles goes here */
}
Here, in the above selector we are selecting all the ul which are nested under .wrapper_div.
Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul, make sure you use > selector which will select direct child, as users tend to nest a ul element under li, say for example dropdown menu, this is common, so it is better to use a selector like
div.class_name > ul { /* Selects first level ul elements */
/* Styles goes here */
}
ul > li > ul { /* Selects nested level ul elements */
/* Styles goes here */
}
You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a. Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul>.
If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:
ul { display: inline-block; }
This is my CSS
ul.xoxo.blogroll {
list-style-type: none;
padding-left: 0px;
margin-left: 27px;
}
ul.xoxo.blogroll li img {
border: none;
box-shadow: none;
}
now i use list-style-type: none; and cicrcle is not visible. But i would like that circle will be visible when i am using ul li and not visible when ul li has img tag.
Is that possible. If i set
ul.xoxo.blogroll {
padding-left: 0px;
margin-left: 27px;
}
ul.xoxo.blogroll li img {
list-style-type: none;
border: none;
box-shadow: none;
}
circles are everywhere.
If i got you right, if there is a <img> inner a <ul>, you want the list-type-style to be none, and otherwise a circle?
if so, i think you need to use jQuery:
jQuery:
$('ul.xoxo.blogroll img').each(function(){
$(this).parent().css('listStyleType','none');
});
The script loops trough every <img> tag, and with .parent().css() it manipulates the css attributes of its parent, what the <li> would be.
Did it work?
Edit: Here's a jsFiddle with a working example: http://jsfiddle.net/Wc72f/
AFAIK, there's no CSS selector for a parent of a specific child. If you want to stay with CSS only, you can add another class, e.g. imglist or similar, and select on that.
try this:
ul.xoxo.blogroll li.img {
list-style-type: none;
border: none;
box-shadow: none;
}
it works if I understand the question correctly