CODEWITHSUNDEEP
cssif-statementless
Alex
Alex

Reputation: 7688

CSS/LESS if more then one element

Is there any way, of having a if like syntax, where I can check (for an example) there are more than input[type="text"]

Something like:

.my-element >= 1 {
   border: 1px solid red; // Each .my-element will have a red border
}

.my-lement == 1 {
   border: 1px solid green; // The only .my-element will have a green border
}

In javascript I would do something like:

if ($('input[type="text"]').length >= 1)

I mentioned LESS in the title, because I'm writing my css code in a LESS syntax

Upvotes: 0

Views: 738

Answers (2)

Arpit
Arpit

Reputation: 12797

NO, in CSS there is no if else . Use JavaScript for changing your css dynamically.

the if statement is not present in LESS as well. But this language supports guard expression which may help in mimicking some if statements.

Check this tutorial

Upvotes: 2

David Thomas
David Thomas

Reputation: 253446

You can, in some cases, approximate this (albeit it requires an up-to-date browser, compliant with CSS3):

input {
    border-color: #f00;
}

input:only-of-type {
    border-color: #0f0;
}

JS Fiddle demo.

The above works on the assumption that you're trying to style an input element which is the only input element (or 'element of that type') as a child of its parent (it has no siblings of the same input element-type).

If, however, you're trying to style an element differently according to whether it has any sibling elements, you can use:

input {
    border-color: #f00;
}

input:only-child {
    border-color: #0f0;
}

JS Fiddle demo.

References:

Upvotes: 2

Related Questions