Is it possible to set a CSS pseudo-class on an HTML element? In this particular case, I would like a certain <div> to have the last-child property.
I asked myself this question when IE11 wouldn't recognize a specific <div> as a last-child while other browsers did. I have found a work around and at this point I just want to know whether setting a pseudo-class on an HTML element can be done.
A coworker suggested this may be in fact done using React framework. However, I have not been able to find anything suggesting this is possible.
No.
Pseudo-classes are used to define the state of an element.
Yes, you can.
This would also have to either be in a JS or CSS file, not an HTML file as far as I know.
For example, I was using :nth-child(4) on an img and can't see it being different with div.
This is how I was using it in my JS:
$('#recipeStack img:nth-child(4)').css({
'transform' : 'translate(160px, -160px)',
'transition-delay' : '0.3s',
'opacity' : '1'
});
And should turn out fine in your case in a CSS file too:
.parent > div:last-child {
background-color: red;
color: white;
}
Related
I am trying to implement dark mode in my app.
The idea is to add this to the root element:
<div id="dark">
And then this in CSS:
#dark {
background-color: #1A1A2E;
}
And then in Css, customize each dom element by using classes. For example, here I will work on cards:
#dark .card-body {
background-color: #16213E !important;;
}
#dark .card-header {
background-color: #0F3460 !important;
}
Now, this works perfectly fine.
But, with Modals, it does not work. I think it's because Modals are not rendered initially so for some reason the dark style does not apply to them.
What worked though is adding id="dark" to each modal:
#dark .modal-header {
background-color: #0F3460 !important;
}
#dark .modal-body {
background-color: #16213E !important;;
}
#dark .modal-footer {
background-color: #16213E !important;;
}
<Modal
// dark doesn't get applied automatically for modals because apparently modals are not rendered in the beginning
id="dark"
isOpen={this.state.isModalOpen}
toggle={this.toggleModal}
>
<div className="modal-header">
But, it'll be a pain to apply this to every single modal.
One solution mentioned here:
Modal should be the descendant of a tag which has id="dark". It is
loaded by the script right below the script tag and you are trying to
put 'dark' id on some div tag and the modal doesn't lie inside it,
thus the CSS selector not targeting it.
So, you need to put id="dark" on the body tag.
This solves the modals issue.
But, the problem is in my original implementation of dark mode, I am controlling that id in the root component like this:
// Root component
<div id={this.state.should_enable_dark_mode ? "dark" : "default"}>
And should_enable_dark_mode is managed like this:
manageDarkMode() {
window.addEventListener("storage", () => {
console.log("change to local storage!");
let should_enable_dark_mode = localStorage.darkMode == "true";
this.setState({
should_enable_dark_mode,
});
});
}
So the problem with the solution mentioned above is that I couldn't find a way to control the body tag from the react app. And I am not sure if it's a good thing to do.
What do you think I should do?
I see in the comments to your original question that you decided to just modify the body element in the browser DOM, which will probably work fine since the body element is not controlled by React and will likely not be changed by any other code.
I would however like to suggest a few improvements that makes it at bit less dirty:
use a data attribute like data-display-mode="dark" as a target for your CSS selectors instead of the ID. IDs are supposed to be stable and other tools and libraries (e.g. UI test tools) might rely on this.
use the Modal.container property to attach your Modals to the App element (the React-controlled global parent div defined in your React code, which you can control, not the app-root-div in index.html). Then set your data-display-mode attribute here by React-means. This way you will not bypass the virtual DOM.
use CSS custom properties for defining your colors, and then define all dark mode modifications in one place. Don't spread your dark-mode-styling code across multiple class selectors - you will have a hard time maintaining this.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
Is there any problem creating a CSS class like this:
[test] { font: 13px; }
and use it in an HTML attribute as this:
<div test></div>
Would the performance in some browsers be affected by using this method?, I've tested it with Mozilla Firefox and Google Chrome and they seem to work with no problems.
Your custom attributes are not valid HTML. You must use data-* attributes if you want to put custom data on your elements. This makes what you are doing bad practice.
In addition, there are CSS classes already that should meet your needs, unless there is more to your question than you have described.
While there is no problem in applying styles this way, and sure it does work in the browsers, you have to understand that this is not a standard way of applying styles.
Since you have also asked from a 'practice' perspective, then, yes, this surely is not the right practice. The idea is: HTML is used to define the elements to be shown within the browser window, CSS is used to apply any styling that needs to be applied on these elements and JavaScript is used to perform any 'action' on it. So, from a practice perspective, this surely is bad practice!
On another note, why the reluctance to create a class and apply it on the div? After all, this class can be reused as and when required. If you need it only once, then why not create an id selector?
HTML:
<div class="rightApproach">The right way of applying styles</div>
CSS:
.rightApproach { color:Red; }
See this fiddle where you can see your approach as well as the correct way of applying styles, be it class selector or id selector.
http://jsfiddle.net/JkRPt/
It's better to use classes. This way will not work in older browsers and it's not professional.
However it doesn't have any performance issues.
HTML:
<div class="test">
CSS:
.test { font:13px; }
its good to use classes. Example:
<div class="module accordion expand"></div>
/* All these match that */
.module { }
.accordion { }
.expand { }
Is there a way to declare a CSS declaration that targets the parent of an element by id?
For example, I know the ID of my element, "element1" but I don't know the id of it's parent. I want to declare CSS information to target myDiv but I won't know it's ID.
HTML:
<div id="myDiv">
<div id="element1"> hello </div>
</div>
CSS:
#element1(parent) {
border:1px solid red;
}
No, right now there isn't. There's been talk of this in the WHATWG groups and the like for a long time, but until a year or two ago the browser vendors refused to support any proposals for such selectors because it would slow down CSS rule matching too much due to the way the DOM is parsed.
With advancements in DOM parser engines it is currently considered possible from the browser vendor end, and as such there is a proposal now to include some kind of target selector in CSS4, with even the syntax still under debate. Right now, there's no browser that supports any of the proposed notations, nor is any one of them even ready internally to support such feature.
The current CSS4 Selectors draft mentions the subject specifier, but even contains an explicit note right now that it's undecided whether, if this proposal holds, the ! should be prepended or appended to the selector, or if there should even be 2 of them.
You can do it with jquery, if you're not limited to just css:
$(document).ready(function(){
$("#element1").closest("div").css({"({"border":"1px solid red"});
});
For multiple parents use parents() and for the the closest one use closest(). Closest() is great because it only gest the first parent that matches you selection.
if you know the parent element it's a div:
div > #element1{
border:1px solid red;
}
but if you don't know what tag is parent of your element, read the whole thing first before using this code:
* > #element1{
border:1px solid red;
}
This reads as: all elements that are the direct descendant (which can only be one) of the element with id 'myDiv'.
There are some browser compatibility issues, but according to this post the guy says that it is compatible with IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60.
But the really bad thing about this code is that it might bring performance issues (although I didn't test) because you are forcing the browser to go through all the elements of the page (which can be extensive).
Now, if you want to be a good css coder and avoid these you should think the other way around, just like everybody else does, for instance, applying classes or id to the parent element(s). If you can't reach them then check if it is possible to insert a new div in your structure wrapping your #element1 element and being the parent of that element or even use javascript.
Not with vanilla css. You could try scss, less or some other dynamic css generation language.
You need nested declarations and parent selector support.
Here is an example that works in both scss and less:
#element1 {
#myDiv & { border: 1px solid red; }
}
Some references:
Referencing parent (SCSS)
Nested rules (LESS)
Is it possible to apply a style to an HTML element using only its title as a unique identifier? For example:
<div class="my_class">
My Link
</div>
I would like to write a rule that will apply only to link element within a div of class my_class and the link title MyTitle.
I do not have the ability to change page layout, however, I can use a custom CSS file that is included automatically.
Thank you
It sure is, using what's called attribute selectors; these are part of CSS2. In your particular case, you'd use:
div.my_class a[title="MyTitle"] { color: red; }
You can read more about attribute selectors here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Yes you can:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
You would say A[title="MyTitle] I believe.
What you are looking for is css attribute selectors:
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
a[title]
{
...
}
CSS specifications identify a number of "selectors" that may help you here. For example, you could apply a rule such as the following:
.my_class a[title="MyTitle"]
{
...
}
You can see a detailed specification of CSS "selectors" here:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
Although it is possible, using attribute selectors (see http://www.w3.org/TR/CSS2/selector.html#attribute-selectors ) Internet Explorer 6 does not support it (see http://kimblim.dk/css-tests/selectors/ )
An example from the W3C site: H1[title] { color: blue; }