I want to apply CSS to all pages except sidebars. Let me show you an example
.page #buddypress ul.group li
I want to apply CSS to all <li> tags that are children of ul.group class. Problem here is that this class is also exist in sidebar and I don't want to change styling of sidebar. I just want to apply CSS to the page section and not to the sidebar.
I except some kind of :not(.class) operation to do that.
Here is what I am trying to do
.page :not(.sidebar) #buddypress ul.group li
But this trick doesn't work for me. I really appreciate if someone could solve my problem. I want to apply CSS to all sections except sidebar.
Here is what my HTML looks like:
<body>
<div id="buddypress">
<ul class="groups">
<li> </li>
</div>
<div class="sidebar">
<ul class="groups">
<li> </li>
</div>
Try this code
div:not(.sidebar) ul.group li {
border: 1px solid red;
}
// Here i have used div, but you can use whatever tag you have used for sidebar
<body class="page">
<div class="sidebar">
<ul class="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="page-section">
<ul class="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
You can override all css for that element by using its ID (css id overrides css class).
A possibility would be:
#id{all:unset}
However, this has limited browser support and your specified element should have an ID.See also: https://stackoverflow.com/a/36892781/9204431
Related
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
I am newbie and I've got a trouble. I have element with four elements and I can't put one on the right side.
My code is here:
<body>
<header>
<div id="topmenu" class="navigation">
<ul class="navul">
<li>FAQ</li>
<li>ABOUT</li>
<li>Next</li>
<li class="rightbutton"><div>Log In/Sign Up</div></li>
</ul>
</div>
</header>
And css is on jfiddle ( I was not able to attach it correctly)
http://jsfiddle.net/EGxWy/2/
Try putting float:right on one li element and display:inline-block on all li elements.
I have a simple horizontal menu. On some of the menu headings, i would like to split them so the text starts on a new line.
HTML:
<ul class="tabs">
<li>
<div class="home">
Home
</div>
</li>
<li>
<div class="contact">
How to
Contact Us
</div>
</li>
<li>
<div class="products">
About Our
Products
</div>
</li>
</ul>
CSS:
.tabs ul {
list-style: none;
}
.tabs li {
display: inline-block;
}
So, what i am trying to do is, rather than appear as About Our Products.. Instead:
About Our
Products
Here's my fiddle: http://jsfiddle.net/oampz/dWbx5/
Ideally without using br
So like I said in the comment, you can maybe use max-width
HERE is a fiddle using it.
EDIT: I added it to the inline CSS, but you can move it into your CSS page.
Simply use a break <br />?
<div class="products">
About Our<br />Products
</div>
I also prefer to use a float: left; on the li instead of inline-block, it's easier (and more logic) to work with:
http://jsfiddle.net/2EDbr/
<div >
About Our
</div>
<div>
Products
</div>
similarly u can use for all
http://jsfiddle.net/dWbx5/4/
I have some markup and I would like to know if it is proper to surround <li> tags with <div> tags.
<div class="round3">
<ul>
<div class="top"><li class="winner first"></li></div>
<div class="bottom"><li class="winner last"></li></div>
</ul>
</div><!--end round3-->
Thank you for helping.
No, it is not, the only tags that can go directly inside ul elements are li elements.
You can however, place a div inside a li element if you wish.
<ul>
<li><div>Example</div></li>
</ul>
For more information about HTML lists, see the relevant W3 specification section.
It is not possible.
I propose such correction:
<div class="round3">
<ul>
<li class="winner first top"></li>
<li class="winner last bottom"></li>
</ul>
</div><!--end round3-->
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>