Is there a way to apply CSS styles to dynamically generated divs?
In this case, In Wordpress, I have a div class of .profiles and dynamically generated div ID's within that class of #profile-1, 2, 3 etc.
What I want to do, is apply the same styling to each profile-1, 2 etc div id's without having to specify the styling in each and every one within the stylesheet.
Is this possible?
Thanks!!
I may not be fully understanding the question, but couldn't you just create a style for the class .profiles in your css? If all of your divs use that class, then it should work just fine.
.profiles { (put your style here) }
You could do this in your css:
div[id^="profile-"] { your styles }
If the only childs inside <div class="profiles"> are your targeted divs, you can style them all this way:
.profiles div {
/*your style here*/
}
Another way to address this problem would be to add a class to all of your divs (and then style that class). In Wordpress, you can do that easily in the template files.
Related
What is the more appropriate approach when using BEM ?
Are we allowed to not add extra classes to elements and style the elements themselves
<section class="news-section">
<a>link</a>
</section>
.news-section {
a {
color: blue;
}
}
Or do we have to add extra classes to all elements and style those classes?
<section class="news-section">
<a class="news-section_link">link</a>
</section>
.news-section {
&_link {
color: blue;
}
}
Are we allowed to not add extra classes to elements and style the elements themselves
No.
With BEM, you have to always use CSS classes:
In HTML, BEM entities are represented by the class attribute. (bem.info)
In return for this rigidity, BEM will bring you :
Scalability, because blocks can be nested without limit;
Flexibility, because CSS selectors are loosely coupled with HTML tags.
You should definitely add extra classes to style elements like links. It's the same situation as when you add styles to buttons header__btn or images use-profile__img
It is never bad to add additional classes and they make code expandable in the future. Imagine a situation where you would like to add more elements inside this <a> tag. You wouldn't code it like this news-section__a__link-header right?
Important: you shouldn't target elements 2 levels down with BEM as it's block__element-modifier, not block__element__element--modifier :)
BEM is pretty well explained here
To add to the existing answers, yes avoid using specificity to style items unless absolutly needed (CMS wysiwyg content for example), so your second code block it correct BEM
However in your specific example, all you are setting is a color, and you probably have other items you want the same color right?
So i probably makes more sense to use a utility class for that:
<section class="news-section">
<a class="u-txt-blue">link</a>
<p class="news-section__title">...</p>
</section>
.news-section {
...
&__title{
...
}
}
//utilities.scss
.u-txt-blue{
color: blue;
}
Add classes to all the elements so as not to tie your styling of your components to your HTML structure.
In your example your first example, the new-section__link will have to be an anchor element, in the second it can be any type of element which is a lot more powerful and flexible.
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
I'm just wondering if it is possible to assign a CSS class to the content added by an :after pseudoelement. Something like this:
span:after {
content: "after!"
class: red
}
I know you can specify several style attributes like font-size and so on, so I could imagine applying a class should be possible, too.
Acutally, I'm trying to append a glyphicon via bootstrap CSS this way. But a simple
span:after {
class: icon-wrench
}
didn't do it.
Pseudo-elements can't have classes. You can only apply individual style rules to them directly. There isn't a way to copy styles from a real element of a certain class to its pseudo-element either, unless you specifically select it, something like span.icon-wrench:after.
I am inserting an image into a div container with css like this:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
}
I want apply some css attributes to that image without listing them in the together with the "content" attribute, but apply a nother style to it, to reduce CSS overhead. Something like this, but that of course does not work:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
inherit: ft-floder-icon;
}
Any chance to do that?
You can group your CSS selectors to apply the same styles on multiple elements. This allows you to apply the same styles to multiple elements without repeating the styles.
Example:
.ft-folder-icon, .ft-folder-closed:before {
color: red;
}
This will apply the color: red; style to both the .ft-folder-icon elements and the .ft-folder-closed:before pseudo-elements.
If you decided to use a CSS pre-processor like LESS you could abstract your CSS using "mixins" similar to this:
.ft-folder-closed:before{
.ft-folder-icon;
}
Using "mixins" you can embed all of the properties of a class into another class just by including the class name as one of its properties. It's very similar to variables, but for entire classes.
i have a problem to override the css in content page div tag .
I'm using nested masters.So in both master pages i used so many div tags with same css theme.
But i want to omit css style for one particular div tag in content page.
Thanks in advance.
If you've defined styles to div { ... } in your CSS, then you can't simply 'disable' them on a new div unless you explicitly redefine them to the default. If all you div styles are declared via class or id attributes, then using a bare div will have this same effect.
Example, bad CSS. This can't be overridden without explicitly giving your target div a class or id and redefining font-size.
div { font-size: 23em; }
Example, better CSS. If you define all your div CSS with classes and ID's then when you want default styling just use a unclassed, un-ID'ed div.
div.reallyBig { font-size: 23em; }
Without seeing your original markup its hard to be much more specific. You may need to reassign styles / classes / id's for your desired effect.
You can give the div an ID and a style of its own using an id selector (#). You can't disable CSS for a specific instance of a tag.