I have DIV ids in an application that are generated dynamically, with an ID at the end. For example: <div id="vote_score_72">, <div id="vote_score_73">, <div id="vote_score_74"> and so on.
How can I write that id in the CSS file so I can apply a style to it?
Further to the suggestion that you should use classes for this functionality (and you should), you can, instead, use the attribute-value-begins-with selector (this may not be the formal name):
div[id^=vote_score] {
color: #f00;
/* and so on... */
}
JS Fiddle demo.
Edited to add a link to the Quirksmode.org's compatibility tables for advanced attribute selectors.
References:
CSS3 Attribute-selectors, at Sitepoint.com.
Attribute selectors, at CSS3.info
Attribute Selectors, at the Mozilla Developers Network.
You should add a common class to all these elements and use this class in your CSS.
Classes are the best way to handle common style for different elements.
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.
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
I have some html that looks like this:
<div id="parent">
<div id="child"></div>
</div>
I want to apply a default background color to #parent except for when it contains a #child.
So the CSS should end up looking something like this:
#parent {
background: red
}
#parent:contains(#child) {
background: none
}
However, I can't get the :contains pseudo selector to work that way. Is there a way to achieve this?
:contains() was only intended to match elements containing certain text, not elements containing certain other elements. It is because of the complications associated with matching elements by text that there were almost no browser implementations, leading to :contains() being dropped from the spec.
Since there is no parent selector in CSS, and :has() (which does look at elements) only exists in jQuery, you won't be able to achieve this with CSS yet.
For the record, jQuery implements :contains() as well, but it does so according to the old spec, so it uses the name :has() for elements instead.
With jquery
if($("#child").length>0) $("#parent").css("backgroundColor","#fff");
Its not possible with pure css.
I have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like <table style="no-style"> and then it is plain and ignores the CSS?
I have looked but I can not find anything related!
Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.
CSS
table.myClass {
...
}
HTML
<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>
CSS are cascading style sheets, they only style an element. Can't manipulate anything. You will need to use JavaScript.
Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.
You need to explore CSS in more depth, and one thing you might focus on is classes. You can create a "class" of styles, and apply it to a particular HTML element like a table, and not have it affect another table you want to leave "plain."
.foo {
border : 1px solid black;
}
Then apply that class to your HTML element:
<table class="foo">
...
</table>
Another way to approach the problem is with selectors.
No, you cannot take off a style that way – there is no way in CSS to say “don’t apply any of my styles inside this particular element.” You can only override style settings. For example, if you have a setting like * { color: red } in your stylesheet (just a foolish example), you cannot add a rule that would exclude a particular element and make the browser apply its default color inside it. But you can set table#foo * { color: black; } to make all text inside a table with id=foo have the black color.
Overriding overall style settings inside a table that way isn’t trivial, but certainly possible. You just need to be explicit about the style you want; you cannot say “use browser defaults.”
However, there’s an indirect way, in a sense, though it is seldom a good idea: If you put your table in a separate document and embed it via an iframe element, then the table will be displayed according to the CSS code specified for the embedded document, quite independently of the style sheets for the embedding document. At the extreme, if you specify no CSS code for the embedded document, it will appear as per browser defaults (though inside a subwindow, an inline frame, with dimensions set by the embedding document).
If I have a style class defined as such:
.myclass{
//bunch of other stuff
float:left;
}
and I define another class like this:
.myclass-right{
float:right;
}
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
Using !important is one way to do it.
.myclass-right{
float:right !important;
}
In addition if you are more specific with your selector it should override as well
div.myclass-right{
float:right;
}
Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
As long as myclass-right is declared after your other class in your css file, it will work.
In case of a conflict, the css tag that comes after has a priority.
In other words - if you want some class to ever override others - just put it on end of your css file.
P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}