I have the following HTML line:
<div data-component-id="12345" class="component" data-component-status="operational">
Is it possible to use the data-component-id as a CSS Selector?
I would like to add a CSS code especially for this div, eg: {display: none}
You can use the Attribute selector [] for this
div[data-component-id="12345"] {
background-color: red;
}
<div data-component-id="12345" class="component" data-component-status="operational">
Demo
</div>
Related
Example: <div class="col-12" style=":first-child { display: none; }">
I don't have access to styles, so I need to fix that in the html file, can I add first-child selector right in the style attribute? The example doesn't work.
How to apply css to element having same class name.i want apply css to both how can I do this?
I try many times but don't get it right way.
<div class="a">...</div>
<span class="a">..</span>
I am writing my css inside HTML itself inside <script> tag
try this in your css file
.a{
// css that u want to apply
}
When targeting classes in CSS you must do it as follows:
.a {
color: red
}
<a class="a" href="#">This is a link</a>
<div class="a">This is a div</div>
<span class="a">This is a span</span>
This will target all elements with this class a, as shown.
div.a {
color: red;
}
span.a {
color: blue;
}
by this you can apply different css to elements having same class.
To apply same CSS to all elements try this.
.a {
color: red;
}
<div style="blah blah> <a href=”http://www.google.com”> is a red hyperlink,
but this text is all black</div>
I do not want to edit each hyperlink inside individually.
Add
<style>
a {color: red;}
</style>
at the top of the HTML.
Reference: http://www.w3schools.com/tags/tag_style.asp
Give your <div> it's own unique id="" attribute or if you have multiple divs, give them all the same class="" values.
Then use this rule:
<div class="className">link</div>
.className a:link { color: red; }
or
<div id="identifier">link</div>
#identifier a:link { color: red; }
You can add a jquery on document ready and target each hyperlink if you want it in-line. But best approach is still using the css approach shown by others above.
Here's via jquery:
$('div a').css('color', 'red');
I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.
I've tried:
last-of-type
last-child
HTML:
<div class="blog-posts">
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="f03-456245"></div>
</div>
CSS:
.blog-post:last-child{
//do some css
}
Last element using .class is not possible. In your case you can use nth-last-child property.
.blog-posts div:nth-last-child(2) {
background: #ff0000;
}
DEMO
You may have to do like this:
.blog-posts div:last-child{
//do some css
}
It is assuming div is the element. It applies for anyother element type p , span etc...
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj