Is there a way to have same content (inner text/html) to DOM elements with a specific class that are added later.
Take the example of CSS:
.red {
background-color: red;
}
If a DOM element is added in future with a class .red, it's background color will be red.
Can I use a similar technique for the content of the DOM element. Say, all elements with a class of data-amount should have content 40. So if any element has this class, even if added later in the DOM, should show the content 40:
<div class="data-amount"></div>
Is this possible without using JavaScript?
You can use the CSS pseudo-element ::before:
.data-amount::before {
content: '40';
}
Related
I need to style a component based on the class attached to the <body>.
The logo-placeholder is contained inside a shadow root.
The body is outside, of course.
This is what I would like to achieve:
.logo-placeholder {
background: url(logo_LIGHT.png);
}
body.dark .logo-placeholder {
background: url(logo_DARK.png);
}
A huge point with shadow dom that is self-contained. That goes with the CSS as well. Think of each component as a HTML document of its own.
If you want to style an element inside a placeholder, you need to do something like this.
<body>
<custom-element class="dark-background"></custom-element>
</body>
Then inside the custom-element, style your div based on the host's class.
:host(.dark-background) .logo-placeholder {
background: url(logo_DARK.png);
}
Another way would be to use CSS properties.
body custom-element {
--logo-placeholder-background: 'logo_LIGHT.png';
}
body.dark custom-element {
--logo-placeholder-background: 'logo_DARK.png';
}
Then declare the following inside your custom-element
.logo-placeholder {
--background-fallback: 'logo_LIGHT.png';
background: url(var(--logo-placeholder-background, --background-fallback);
}
A complete solution would be as follows:
:host-context(body.dark) .logo-placeholder {
background: url(logo_DARK.png);
}
:host-context(body.dark) means that the selector body.dark must be evaluated in the context of the host container, not based on the shadow-DOM. This is the reason it works.
Whenever we want a custom element to be styled based on its position in the DOM rather than obeying to the shadow-DOM rules, we can use the :host-context() selector.
[:host-context()] allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.
Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.
I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
I have a div and I need to color one of its children div. I was thinking of setting a CSS class to the parent div instead of directly on the children div since I have a javascript class that already have a reference to the parent, so I don't need to lookup for the children.
Is it a bad pratice ? Could it cause me trouble in the future ?
Here an example http://codepen.io/anon/pen/pJgzJp?editors=110
html:
Is this better
<div class="parent1 whatIPrefer">
<div class="children1">
</div>
</div>
than
<div class="parent2">
<div class="children2 meh">
</div>
</div>
css
.parent1{
width:200px;
height:200px;
}
.children1{
width:200px;
height:200px;
}
.whatIPrefer .children1{
background-color: gold;
}
.parent2{
width:200px;
height:200px;
}
.children2{
width:200px;
height:200px;
}
.meh{
background-color: tomato;
}
More Context: I want to display problematic items in a red in my page. There could be many items colored that way, my javascript code to colour it look like this
for (var i = 0; i < this._report.WorksheetSectionIDs.length; i++) {
var worksheetSection = this._report.GetWorksheetSection(i);
if (worksheetSection._worksheet._grid.getColumns().length != columnsCount) {
this.Errors.push("Worksheet " + worksheetSection._sectionID + " doesn't have the right number of columns.");
worksheetSection.SetInErrorState();
}
}
where each worksheetSection has a reference to the parent element, so I can easily add a class to it.
Your situation is largely dependent on your use case. You did not provide much context, so this may be the best or not the best application for targeting your child div.
You can access the child of a div using the child selector for css:
.whatIPrefer > div { styles }
Here is an excellent article on selecting children of a parent element - check it out.
Hope this helps. Please comment below with any other questions. Thanks
It depends on web structure, and on elements, that you are styling. For example, if you know, that header will be just one, you can easilly style directly the header, but if there is more headers with different styles, for example header in body, header in head and so on. In that case it is good to style throw parent element.
In my projects, i always style throw parent elements, sometimes it is useless, but it is a good practise and you never know, when your web will need new elements.
I am using css media queries in my main css file for printing some page elements.
Here is the sample code
body *
{
visibility: hidden;
background: #FFF;
margin: 0px;
padding: 0px;
}
#Grid *
{
visibility: visible;
}
But my application is huge and I don't want this to affect the existing functionality. So I only want this css to apply on the pages where <Div> element with id <Grid> exists also writing this in other css file and using in each page would be very time consuming as I need this functionality on about 80 pages.Is there any way to select all body elements where div with id Grid exits in a single css file for all the application ? I am thinking of something like
body [div="Grid"] * {}
but unfortunately this doesn't works.
AFAIK selecting parent element using child element is not possible in either CSS2 or CSS3.
But you can do this with CSS4, check Is there a CSS parent selector? for more info :) FYI this is not supported in any of the browsers. But just mentioning the code below
body! > div#Grid {
background-color:red;
}
Here is the fiddle which shows above example http://jsfiddle.net/M75wZ/
But if you are open to third party JS plugins which enables parent selectors, here is a plugin that does the job https://github.com/Idered/cssParentSelector/blob/master/jQuery.cssParentSelector.js.
But if you just want only for this requirement and want to make it work, do like below
window.onload = function(){
var div = document.getElementById('Grid');
if(div){
if(document.body.className.indexOf('bodyHasGrid') == -1){
document.body.className += " bodyHasGrid";
}
}
}
Then apply styles using body.bodyHasGrid
Hope this gives at least an idea of doing it.
Edit:
any way to select all body elements where div with id Grid exits
NOT POSSIBLE WITH CSS as we don't have parent selector yet, so you cannot select any parent based on child element.
Inorder to select the div element, having an id Grid, use the selector below
div[id="Grid"] {
/* Styles goes here */
}
Demo
Note: Above selector will select only those elements having an id Grid, if you expect to target entire page where an element with the id Grid exist, than you cannot do that.
If you want to target elements uniquely which are on a particular page, than call the same id on body element, and replace div with body and further nest the element you want to target like
body[id="Grid"] div.target_unique {
/* Styles goes here */
}
In stylesheets you often see div#id { /* something */ } and div.class { /* ... */ } but how often do you see just div { /* something */ }?
Is it a bad idea to style div tags that have no #id or .class associated with them?
It's not necessarily bad practice, as long as you're sure you want to apply this styling to every single div in your document. You can always override and / or add further down the cascading style sheet.
It all depends on your purpose.
Styling all divs to be one specific style can be overridden.
So you may want to force height on all divs, but on divs with class hidden you want display none. Finally you may want a div with id = hello to have a red background.
Next you decide that you want a div with id=foo and class = bar to be have height:200.
div {
height:100px;
}
div.hidden {
display:none;
}
div#hello {
background-color:#FF0000;
}
div#id.bar {
height:200px;
}
Well...it depends on what you want. If you want every single div tag in your markup to have the same style then it makes sense to do a tag selector instead of a class or id selector.
As you normally use divs for a bunch of different stuff, I would answer "yes".