If my div is like this: <div class="form-item-field-afl-dienst-adressen-und-0-street"> is it possible to call it in my css with just a fraction of it? Like .form-item-field-afl-dienst
The ending 0 is the number of items on the page, which is not predefined... And I want to catch them all in one css statement..
Or, how can I catch
<div class="form-item-field-afl-dienst-adressen-und-0-street">
<div class="form-item-field-afl-dienst-adressen-und-1-street">
<div class="form-item-field-afl-dienst-adressen-und-2-street">
<div class="form-item-field-afl-dienst-adressen-und-3-street">
...
with one statement?
EDIT FOR ALEX
<div class="form-item-field-afl-dienst-adressen-und-0-street">
<div class="form-item-field-afl-dienst-adressen-und-0-nr">
<div class="form-item-field-afl-dienst-adressen-und-0-zip">
<div class="form-item-field-afl-dienst-adressen-und-1-street">
<div class="form-item-field-afl-dienst-adressen-und-1-nr">
<div class="form-item-field-afl-dienst-adressen-und-1-zip">
This selector should work.
[class^="form-item-field-afl-dienst"]
Note older IEs don't support this.
No, but you can have multiple classes:
<div class="form-item-field-afl-dienst adressen-und-0-street">
Then have:
.form-item-field-afl-dienst
{
}
.adressen-und-0-street
{
}
Edit: new browsers will support selectors as alex pointed out, but for now if you want it to work with most browsers currently in use, it's not possible.
you may want to split the class items up:
<div class="form-item field-afl 0-street">
Then for the combined you can use the CSS:
.form-item .field-afl .0-street
{
...
}
and to use a segment of the class in CSS:
.form-item
{
...
}
Related
Im trying to remove unused classes and id's in my site. Is there a function that I can use in the browser's JavaScript console (or other methods) to filter out the used/unused classes and elements.
Thanks in advance.
Something like this could work:
let classList = ["class1","class2","class3","class4","class5"];
classList.forEach(cl=>checkClasses(cl));
function checkClasses(classToCheck) {
if(document.querySelector('.'+classToCheck)){
console.log(classToCheck+' is being used');
}else {
console.log(classToCheck+' is not being used');
}
}
<div class="class1"></div>
<div class="class2"></div>
<div class="class4"></div>
<div class="class5"></div>
I have a website which contains many divs. Some of them have an attribute data-status.
Example:
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
I want to add an onClick event to them. How can I identify these divs in Jquery?
These divs are not siblings! They are at different knots.
I found this example
$("input[value='Hot Fuzz']")
on api.jquery.com, but with it I can find attributes with a value equal to my search only. But in my case, I want to find an attribute with any values. Is it possible?
Simple as the attribute selector you already used "[]" - just, without the value part:
$("[data-status]").on("click", function() {
console.log(this.textContent)
});
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The same selector can be used in CSS too - if you'll ever need it:
[data-status] {
color: gold;
}
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
I was interested whether can I pass value to the css class from the html?
Like this
Example:
<div class="mt(5)"> Some text </div>
style {
.mt(#mpx) {
margin-top: #mpx px;
}
}
I've heard that such way was possible in Less
No, the way you want it is impossible in either CSS or any of its supersets (like Less and others). It's always HTML that uses values from CSS and not in opposite. Thus you'll need some scripting for what you need.
You can however pass values from HTML to CSS via Custom Properties using inline styles:
.c {color: var(--c)}
.m {margin: var(--m)}
<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>
Or even like this:
* {
color: var(--c);
margin: var(--m);
/* etc. */
}
<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>
But that method is no way different from styling by the plain vanilla method, i.e.:
<div style="color: blue">
... etc.
It is essentially same ugly and non-maintainable.
Many people try to achieve the goal by generating hundreds of predefined classes like .mt-1, .mt-2, ... .mt-99 etc. (since it's extremely easy thing to do in a CSS-preprocessor). But it's even more ugly solution (I won't bother you with details on why it is so. You'll read about that elsewhere or learn yourself after a few projects).
Maybe this is what you looking for? CSS: Attr()
You can bind the value to an attribute and then get this attribute back in the css, like this:
CSS
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Result
hello world
Here is a way of doing that without the use of LESS.
Use CSS variables:
Variables can be declared in the style attribute of the HTML elements.
Then, the CSS will catch the values from the HTML and apply the correct styles.
Add some JavaScript:
The values of the variables can now be dynamically modified.
⋅ ⋅ ⋅
Example of use:
Background color is set in the HTML, (fixed)
Padding of div1 will grow if clicked. (dynamic)
// When clicking on the div1, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
var pad = this.style.getPropertyValue("--pad");
this.style.setProperty("--pad", parseInt(pad) + 1);
}
.divs {
background: var(--bg);
padding: calc(var(--pad)*5px);
}
<div id="div1" class="divs" style="--bg: #ff6; --pad: 1;">div1</div>
<div id="div2" class="divs" style="--bg: #f66; --pad: 2;">div2</div>
⋅ ⋅ ⋅
About CSS variables:
The variable names must begin with -- and are case sensitive.
These variables values are applied to the element and its children.
To use it globally, you can declare it on the body tag.
Here is a link with some examples: https://www.w3schools.com/css/css3_variables.asp
How to select only for the first of many divs with equal names with CSS? For example i have this:
<div class="div">dsdas</div>
<div class="div">123</div>
<div class="div">73</div>
<div class="div">63</div>
<div class="div">53</div>
<div class="div">45</div>
How to select only the first div(with class "div")?
Use the pseudo-selector :nth-of-type(). To select the first element with the class "div", do it like this:
.div:nth-of-type(1) {
}
Working DEMO
Use this
.div:nth-of-type(1)
{
//add style here
}
Check this fiddle
using jquery :
var firstDiv = $('.div').first();
Documentation http://api.jquery.com/first/
or like this:
var firstDiv = $('.div:first');
http://api.jquery.com/first-selector/
Given the HTML where all items are at the same level such:
<div class="h2">Title: Colors</div>
<div class="pair">Hello world (1)</div>
<div class="pair">Hello world (2)</div>
<div class="pair">Hello world (3)</div>
<div class="pair">Hello world (4)</div>
<div class="pair">Hello world (5)</div>
<div class="pair">Hello world (6)</div>
<div class="h2">Title: Units</div>
<div class="pair">Hello world (1)</div>
<div class="pair">Hello world (2)</div>
<div class="pair">Hello world (3)</div>
<div class="pair">Hello world (4)</div>
<div class="pair">Hello world (5)</div>
<div class="pair">Hello world (6)</div>
How do I select the n+3 and n+4 .pair elements starting from the previous .h2 element ?
So the 1&2 are white, 3&4 are pink, 5&6 are white, etc.
I tried .pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; } but it counts the child of the body where the h2 are also children and thus breaks my balance.
http://jsfiddle.net/zPYcy/2/
Edit: no pure CSS selector was found to select adjacent items following a pattern such as .class (n+3). Alternatively, an infinite series of CSS selectors such div + .class + .class + .class ...; wrapping in a div together with :nth-child(n+3) or :nth-of-type(n+3); or JS is needed. You know another hack ? Sharing welcome !
This is a solution combining sibling , nth-child and nth-last-child selector.
Each of your divs with class h2 should also use an extra class that I will call "colors" and "units"
like so:
<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Colors</div>
...
We apply for all children that presents a preceding sibling with classes h2 and colors the following rule which will paint the pink divs
.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) {
background: #FFAAAA;
}
Of course this will also paint those divs below the div of classes h2 and units. We don`t want that to happen.
So now we apply the following two rules, selecting in inverse order up to h2 units.
.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) {
background: #FFAAAA;
}
Be aware that now we must also apply the white background to fix the extra divs painted by our first rule
So...
.h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) {
background: #ffffff;
}
Only thing to take care is the odd or even number of divs in the last group when we are using the nth-last-child selector.
And there you are!
Here is the fiddle to play with
If we want only the 3rd and 4th .pair after each .h2, then this will work:
.h2 + .pair + .pair + .pair,
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; }
If we want to continue to alternate by two even in a longer list, we will need another solution.
EDIT: Since we do want a scalable solution, if we can change the markup slightly by wrapping each block of .pair items with another class:
<div class="h2 colors">Title: Colors</div>
<div class="pairList">
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>
<div class="pair">Hello world</div>
...
</div>
Then we can write a rule that will scale for any amount of items like:
.pairList .pair:nth-of-type(4n+3),
.pairList .pair:nth-of-type(4n+4) {
background: #FFAAAA;
}
Here is a FIDDLE
Out of boredom and curiosity I've written a function to do this. In the case that you are stuck with the html as is and you have extended rows like this, my plugin could be useful to you.
Copy the function from my jsFiddle and use like so:
var pair1 = findCousin('h2', 'pair', '4n+2');
var pair2 = findCousin('h2', 'pair', '4n+3');
var s = pair1.add(pair2);
You can change h2 and pair two different class names, or use different patterns as long as it has #n in it, and optionally +# just like the css nth child selector. Adding false as a fourth argument...
findCousin('list-title', 'list-item', '3n', false);
...will select everything after the first list-title in the given pattern, rather than after each list-item.... if that makes any sense.
I believe sh0ber has written a more practical solution, but this has been fun to make and I might as well share.
http://jsfiddle.net/REU33/6/