give custom style to neighbours li with same class (active) - javascript

I'm trying to give a custom style to neighbours items with the same class, this is the example on jsfiddle
i tried this code, but this gives style to the second, not the first or middle items ..
ul li.active+li.active div {
border-radius: 0 50% 50% 0;
}
the second line describe what i want to do exactly, the same idea if there is more than 2 active items ..
how could i do that using css !

It is the nature of CSS that selectors are cascading, and that, selectors can only be used to identify elements 'beneath' or following the referenced node.
The only available sibling selectors are + (immediate following sibling) and ~ (following siblings), you cannot select a preceding or parent element.
If you wish to select both the preceding and following elements, you will need to resort to e.g. jQuery
$('.active').prev('.active') and $('.active').next('.active')

Related

How to get the number of children div in css or sass

Assuming we have a css list as such
<ul class="parent">
<li class="child"></li>
</ul>
with the child items being generated based from an iterator. How can you get the number of children within parent in either css or scss.
So I can dynamically modify css attributes like padding based on the nth child.
Neither CSS nor SASS will tell you how many items there are in a list. You'll need JS for that.
However, with SASS you can generate the CSS for as many children as you want automatically:
#for $i from 1 through 8 {
li:nth-child(#{$i}) {
padding-left: $i * 20px
}
}
Change the number 8 to any number you think will have you covered (10? 100? 1000?).
More info: http://clubmate.fi/for-while-and-each-loops-in-sass/
Use nth child as explained in this article
https://alistapart.com/article/quantity-queries-for-css
Use direct children selector > and add nth pattern for example:
p:nth-child(2) // get every 2nd child
p:nth-child(3n+0) // elements whose index is a multiple of 3
If you add a numbered class-name to the .child elements, say child1, child2, etc... then you can loop over the set in this manner:
$maxElements: 100;
#for $i from 1 to $maxElements {
.child#{$i} {
//..do something to child element, eg:
color: darkorange !important;
}
}
Not the nicest way as you have to set a max, and some processing happens that is empty, but it seems to work.

Adding a Class vs Removing a Class to Show Elements on a Web Page

Current Design
In a website I am designing I have a number of elements that initially will appear hidden, until the user needs to see them. For example they have scrolled to a desired height on the page.
Currently this works by JavaScript adding a class line.classList.add('show-header-line');
Which in CSS will be defined next to the main styling for the element. This show variant of the class will only contain attributes required to make the element visible opacity: 1. The main styling for the element will contain the opposite attributes required to hide the element initially opacity: 0.
The Alternative
Of course this could work the other way around. With a class designed to hide the element initially being set in the html, then to be removed when required by JavaScript.
HTML
<div class="header-line hide-header-line" />
JS
line.classList.remove('hide-header-line');
Note
Of course I could add and remove styles directly (without the need for extra classes) in the JavaScript, but this seems much worse. Regarding a lack of separation of concerns.
Question
My current approach means the resulting rendered DOM is littered with elements that have main style class and a show class. The alternative means my html file is littered with elements with a main style class and a hide class. Which is considered better practice? Is there another cleaner way I could be doing this?
I would strongly suggest against using opacity:0 for this, rather use display: none. The reason being that an element with opacity: 0 still occupies space in the markup, whereas display: none will add the element to the DOM, but it won't be rendered in the markup (if that makes sense).
Here is a more detailed explanation
Also, an example using the scroll pass certain point you said, this is how I would do it, note code is untested.
window.addEventListener('scroll', function(){
document.querySelector('#navigation').classList[this.scrollTop > 200 ? 'add' : 'remove']('fixed-nav');
});
css
.fixed-nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

Changing CSS of one element from a list made in javascript

So I have javascript that creates a nav bar - unordered list with several regular lists inside. I wanted to use the last list element in the nav bar to toggle the visibility (opacity) of another element. So I've been using this so far:
li:last-child:hover ~ #test{
opacity: 0 !important;
}
The element I want to toggle is a div marked with the id Test. In structure, my code goes:
<body onload="javascript that makes the menu...">
<div id="menu" //this houses the li elements that are created by the javascript></div>
<div id="test">
But for some reason, my code to alter the #test element doesn't have any effect. However, if I try to change the style of the last list element itself, it works fine.
How can I fix this CSS so that it actually affects the #test element?
You need to use javascript if you want the hover event on an element to affect another element that is not a child of the original.
CSS
.transparent{
opacity: 0 !important;
}
Edit: You need to make sure to either include the jQuery after the HTML, or wrap it in a ready block.
jQuery
$(document).ready(function () {
$('li:last-child').hover(function () {
$('#test').addClass('transparent'); //mouseover
}, function () {
$('#test').removeClass('transparent'); //mouseout
});
});

Naming conventions for html/css + MVC?

Are there any good articles on naming comprehensive naming conventions?
I'm looking to clean up some code... everything from assets to models (Codeigniter) to HTML and CSS.
I'm also curious how to structure the CSS... is it better to give everything a unique class ie search-bar-icon or is it better to repeat classes like .search span.icon {?
Thanks,
Walker
In HTML/CSS, the id and class selectors are not equivalent. The id carries more weight, so it should be used sparingly. Use it for sections of a page where you have descendant selectors whose class names are the same as other sections but you wish them to be styled differently. Think of the id like a poor man's namespacing for page regions.
Giving each thing a unique id makes your selectors fastest, but bloats your markup and can become a bog to work with. Using unique classes kind of doesn't make sense (classes are used for groups of objects).
Your second option is the cleaner code wise but the selectors are usually significantly slower.
Giving literally everything a unique class in your CSS defeats the purpose of "Cascading" style sheets. Effective CSS leverages the cascade so that you're repeating as little styling effort as possible.
Bear in mind that most HTML elements can be styled directly. I don't need to use <span class="something"><label>... because I can style the label itself without using a span. Most people use far more divs and spans than they really need to.
You can also style by inference. For example, I might have an <H3 class="searchResults"> followed by a UL of search results that I want to style uniquely from other ULs on the page. Instead of giving the UL a specific class (of, say, "searchResultsList") I could just use the following rule:
H3.searchResults + ul {some styling...;}
or
H3.searchResults + div > * {some styling...;}
As for CSS organization, I find it helpful to organize my files by categories of elements, starting with the simplest and most ubiquitous cases, like a, p, etc. and then handle more complex elements like tables later. I group everything by specificity, because that's part of the cascade rules. An element is handled first in its order of appearance in the file, and then by how specific a rule affecting it is. I place all my one-instance and utility classes last (.iconWhichAppearsOnceEver, .noBordersTable, etc.)
body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...
It fully depends on what you think is best. Conventions aren't rules, they're guidelines that can make your life easier. Codeigniter has relatively strict naming conventions due to the way it loads all the required classes.
For example, the filename of a controller is lowercase but the classname is capitalized and should match the filename. E.g. test.php would results in a class named Test.
Naming HTML classes/IDs is something that isn't standardised and fully depends on what you think is best. I usually try to give my IDs and classes a name that makes sense. For example, a DIV containing a logo will be named "site_logo". A DIV containing a blog article will be named "article", and so on.
Also, don't let the whole "IDs/classes are slower" thing fool you as the speed increase is very small. If you want to optimize your website you'd be better off optimizing your PHP or CSS code than removing HTML IDs or classes.
Remember that you can stack and inherit CSS classes, as follows:
.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }
A nice technique I've used before is setting multiple CSS classes (in this case, for displaying an audit log):
/* the icon is displayed by each entry; if it has no other class,
it will show a "generic" icon */
.log .entry {
padding-left: 20px; /* leave space for icon */
background: url(../images/icons/log-generic.png) top left no-repeat;
}
/* slot a generic delete icon in */
.log .icon.delete {
color: red;
background-image: url(../images/icons/log-delete.png);
}
.log .icon.delete.person {
background-image: url(../images/icons/log-delete-person.png);
}
This is a great way to define a series of generic styles (for links with icons, toolbar buttons, avatars, etc), which you can then override in specific instances (think of it as class inheritance).
I'm a bit weird about naming in CSS, but I stick to the convention that UpperCase is for IDs, and lowerCamel for classes. It just helps me to differentiate.
The zen of CSS naming that I follow is:
The fewer IDs, the better
IDs should be reserved for main layout sections
...and to identify elements for DOM/AJAX operations
Use generic class names (log, icon, person, button, etc)
...then combine them with IDs or parent classes to form specifics, e.g. #Header a.icon.person for a profile link in the header
Most importantly, keep it lean. The less CSS, the better - use generic, re-usable styles, and you will benefit from a) consistency in your UI, and b) less page bloat.
HTH
The entire point of working with classes is so you can use them several times. For CSS specificly for a certain element you should use id's. As said, the less CSS code the better.

difference between css/javascript selectors

What is the difference between div#name and #name? Or is there a difference if you use class or id to position a certain element? Thank you
the first one is more specific if you have several rules applying
for instance, in this example the first case "wins", since it is more specific.
div#kuku {color:red}
#kuku {color:blue}
A good source for reading: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You use IDs for elements that appear once in the document. You use classes for more than one elements in the page.
What is the difference between
div#name and #name?
div#name
refers to only that div which has id 'name'
while #name refers to any element having id 'name'
Class selectors can apply to many tags, while an id is uniquely associated with a single tag. So I'd say that a class selector will return multiple elements, while an id selector would return one.
div#name limits the selector to DIVs with the id only.
#name apples to any element with that id.
As #naivists points out, in case of a concurrency between two rules the more explicit one (div#name) wins.
IDs are unique on a page and have more specificity. In other words, if you have
<div id="foo" class="bar">
Then
#foo{
background: green;
}
div#foo{
background: red;
}
.bar{
background: purple;
}
will be red. There is a good Specificity Wars explanation of this using Darth Vader and Star Wars here
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Image here:
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
In brief an ID # trumps any number of classes (.) which in turn trump any number of tag selectors. e.g:
# *beats* . . . . *beats* body div div ol li p
div#name will match
<div id="name">foo</div>
but not
<span id="name">foo</span>
#name will match both, but you cannot have both in the same document as IDs are unique in the document, and classes can be multiple.
As for positioning, you generally have a number of elements with a given classname but id is specific to a single element. You generally do not want to position a number of elements at the same time, unless it is for only 1 axis.

Categories