I am trying to get a CSS selector to check and apply the CSS based on the condition that if: sectionContent-noToolbar is available, then apply height:2em on sectionSeperator. Is it possible to achieve that using some selector? I have been searching for an answer for quite a while now without any luck. Any suggestions?
<section class="sec" name="Information">
<div class="sectionContent-noToolbar"></div>
</section>
<div class="sectionSeparator"></div>
No, it isn't.
If they were siblings, then you could use the adjacent sibling combinator:
.sectionContent-noToolbar + .sectionSeperator {
height: 2em;
}
… but CSS has nothing that lets you modify an element based on its siblings descendants.
CSS can't help you. You can achieve this with javascript since it can traverse in DOM. jQuery is quite neat for this task. Just select the node you want using css selectors and traversal functions like parents, siblings or children` and modify the found elements' style manually.
As stated in another answer, there is no way to do this. To achieve the effect you wish to achieve you will need to rethink your implementation. This is because at its core, CSS is not a processed language and as such can not handle conditional statements.
In rethinking, you might look into CSS preprocessors such as LESS or SASS which seek to implement logical constructs in CSS.
Related
I'm trying to select <a> elements that are not the parents of <img> elements. (Note: if it's relevant some of the anchors I want to select are childless.) I tried this:
a > :not(img) {}
and this:
a:not(> img) {}
but neither of them seem to work. How would I accomplish this in CSS?
There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:
a:not(:has(img)) {
// Styles
}
The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.
I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.
Unfortunately, no. You'd need to use jQuery.
You could do some kind of workaround using CSS:
Assign a class to links that do not have child elements that are images and use that class to style the links as normal (e.g. a.class{color: red})
Assign a class to links that do have an image child element, and use a:not(.class){} to change their color
Reason: There is no parent selector in CSS. See:
Is there a CSS parent selector?, CSS Parent/Ancestor Selector
Let's say I have on page 2000 elements. I want to inject into this page elements (banners) from custom module. This module's css file has 300+ css selectors, each selector needs to have unique dynamic prefix to avoid conflicts with other modules inside the same page. I can not use 1 unique id selector because more banners can be loaded, so I need to use something like this:
<div id="company_banner14"></div>
<div id="company_banner15"></div>
div[id^='company_banner']{
}
or
<div id="company_banner14" class="company_banner"></div>
<div id="company_banner15" class="company_banner"></div>
.company_banner{
}
What is better from performance view? Is using regex selector bad practice, would 300 regex selectors make any visible performance impact?
After looking at what you need is have a custom CSS for all elements. There are some points that should be kept in mind for this query.
Using Inline CSS- I think inline CSS is the best solution if you are not using long CSS for one element. It saves very valuable amount of code to your page if your loop too many elements. For example, <div id="company_banner15" class="company_banner" style="Width:x; height:y;"></div>
Using CSS Classes- It is the alternate way for Inline CSS but not as code saver as Inline CSS. if your using same type of style to all elements it is accurate not not if your using different type of style in loop.
Hope these suggestion will guide you. Thanks and cheers.
I am trying to get a CSS selector to check and apply the CSS based on the condition that if: sectionContent-noToolbar is available, then apply height:2em on sectionSeperator. Is it possible to achieve that using some selector? I have been searching for an answer for quite a while now without any luck. Any suggestions?
<section class="sec" name="Information">
<div class="sectionContent-noToolbar"></div>
</section>
<div class="sectionSeparator"></div>
No, it isn't.
If they were siblings, then you could use the adjacent sibling combinator:
.sectionContent-noToolbar + .sectionSeperator {
height: 2em;
}
… but CSS has nothing that lets you modify an element based on its siblings descendants.
CSS can't help you. You can achieve this with javascript since it can traverse in DOM. jQuery is quite neat for this task. Just select the node you want using css selectors and traversal functions like parents, siblings or children` and modify the found elements' style manually.
As stated in another answer, there is no way to do this. To achieve the effect you wish to achieve you will need to rethink your implementation. This is because at its core, CSS is not a processed language and as such can not handle conditional statements.
In rethinking, you might look into CSS preprocessors such as LESS or SASS which seek to implement logical constructs in CSS.
If I want to style all of the <input type="submit"/> within the <div class="control-group control-connected"> in<form>s, I can apply this type of selector:
form div.control-group.control-connected input[type=submit]{}
However, let's say I want to also style the <button> elements within those types of divs as well.
Is there a more efficient way than doing this?
form div.control-group.control-connected input[type=submit],form div.control-group.control-connected button
That implementation seems rather wordy, and also redundant, shouldn't I be able to do something like this?
form div.control-group.control-connected (input[type=submit], button)
The shorter way is to use class names for elements that share a common style.
I suspect that you'd have to use LESS if you wanted to use a more compact syntax.
Check this
http://sass-lang.com/
sass lang will clean your css
If you need the specificity, go with the notation you mentioned.
There's currently no widespread support for native CSS mixins to achieve what you want.
If you're interested in developer productivity with CSS, I recommend you give SASS a try:
http://sass-lang.com/
In native CSS the solution would be:
1: add an ID attribute to the element div.control-group.control-connected.
#control-connected input[type=submit],
#control-connected button {
/* css */
}
2: add a common class name to the elements.
.fancy-style {
/* css */
}
The non-native CSS solutions would be SASS or LESS.
Until we get support for nesting in CSS, you'll either have to write it out like that, or use a preprocessor of some sort, such as LESS or SASS, to allow you to write stylesheets that are easier to read.
Note: LESS, SASS, and other variants require you to convert from the input format (LESS, SASS, etc) to CSS before displaying on a website. There are automatic methods of doing this (both server-side and client-side).
Example in LESS
form div.control-group.control-connected {
input[type=submit], button {
/* Styles here */
}
}
I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element
<div id='myDiv' class'ActionControl SearchBox'></div>
where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?
What issues have other people come up against? How have they been resolved?
As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.
This is definitely a good practice...
What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.
Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.
Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.
I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.
Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.
Another way to use multiple classes is to get a kind of inheritance.
.thing { ..blah.. }
.thing.subthing { ..tweaks.. }
<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>
Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.
Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.