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;
}
Related
Basically, I'm creating a dark theme system for my website, and it adds the dark class to the html tag when the proper function is called. I'm using CSS variables like --light-theme-bg: white; and accessing them with var(--light-theme-bg);. How can I style specific elements such as hr based on if that dark class is attached to the html element. How can I do this?
Scoping is your friend. You'll need to add two rules to your CSS. One for the dark theme and one for the light one.
In those rules, you can define a --background var.
All child elements that reference that var will respect it.
.light {
--background: #f9f9f9;
}
.dark {
--background: #191919;
}
.first,
.second {
color: red;
background: var(--background);
}
<div class="light">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
<div class="dark">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
If you want to select an element inside a .class, use the css syntax .class element, so your code would be .dark hr to select it an hr element inside an element with the class of .dark.
As you mention It added "dark" class to the parent html tag. So considering dark as parent class you can use css to all element like
.dark elements(h1/div/p/others)
I need to remove strings that do not have an html tag.
For example :
<div class="A">
keep this and i want to remove this
</div>
Can I do this using only css ?
Maybe you can use font-size ::
.A {
font-size: 0;
}
.A a {
font-size: 20px;
}
<div class="A">
keep this and i want to remove this
</div>
You could use visibility:
.A {
visibility: hidden;
}
.A a {
visibility: visible;
}
<div class="A">
keep this and i want to remove this
</div>
NOTE - of course this DOES NOT remove the string / element in question from the DOM itself, it merely hides it but achieves the same purpose.
Set the style inside of class "A" to be blank by default. Set up a secondary class to handle ".A a". This will allow you to have two different styles. One for anchored, one for not.
.A { color: rgba(0, 0, 0, 0.5); } //Set this to transparent
.A a { color: #000 }
Something like that.
You can also use display: none with the :not() pseudo-selector
.A :not(a) {
display: none;
}
EDIT: This does not work
Neither does this:
.A {
display:none
}
.A a {
display: inline!important;
}
You can not do this with pure css. If you cannot change the markup, then you will need to use JS to grab the content you want to keep and remove the rest.
If you have any control over the markup you should really consider using different markup. You could have an alternate element that is initially hidden.
<div class="A">
keep this and i want to remove this
</div>
<div class="A hidden">
keep this
</div>
you could also enclose the other content you want to remove in a span tag and give it a class that you can reference later.
<div class="A">
keep this <span class="bad-stuff">and i want to remove this</span>
</div>
On this answer: https://stackoverflow.com/a/1725486/2519402 to a question, it states:
It sounds like you had h1 .myClass instead of h1.myClass - there's an
important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
I don't have enough points to ask my question as a comment on that answer.
So, based on what is said above, shouldn't the following code work:
<style>
h3 .h3nobtmgn {
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes, but vertical margin styles won't work on an inline element like <strong>. http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
So your CSS selector will target the correct element but the style you applied will have no effect.
For that to work you can try:
<style>
h3 .h3nobtmgn {
display: block;
margin-bottom:-20px;
}
</style>
<h3><strong class="h3nobtmgn">Why would I need or want this item?</strong></h3>
Yes it does.
h1.myClass would change the appearance of
<h1 class="myClass">...</h1>
And h1 .myClass would change the appearance of
<h1> ... <span class="myClass">...</span></h1>
You will see through http://www.w3schools.com/cssref/trysel.asp that when you are doing div p it will select all p inside of div. So, the answer is yes.
here is a sample: https://jsfiddle.net/r5d0kkb5/
which shows selectors for div p and div .B and also div .A for your thoughts.
Code:
<div class="A">
<p >
A
</p>
<p class="B">
B
</p>
</div>
Css:
div p {
background-color: cyan;
}
div .B{
font-size: 32px;
}
div .A{
color: red;
}
Let's say I have HTML that looks like this
<div class="abc">
<a>some link</a>
<a class="xyz">another link</a>
</div>
and CSS that looks like this
.abc a
{
color: #fff;
}
a.xyz
{
color: #aaa;
}
The problem is second link with class xyz inherits the color #fff from it's parent div. Is there a way to make it inherit the color from class xyz? Also the concept of :first child and or :last child wont help because I just stated 2 links here which is not practical.
What you probably need to do is to make your CSS more specific. Without all of your code it's hard to say how specific you need to get.
.abc a
{
color: #fff;
}
.abc a.xyz
{
color: #aaa;
}
<div class="abc">
<a>some link</a>
<a class="xyz">another link</a>
</div>
Reference: CSS Specificity
I want to apply a css rule to everything (* { color: red; }).
But, how can I do this without the need for Javascript or applying a class to everything I want it to be applied to?
Something like:
*:not-type(div) {
color: red;
}
And the document would be:
<span>this is red</span>
<span>this is red</span>
<div>this is not red</div>
Try like this:
*{
color: red;
}
div{
color: blue;
}
To select everything except div elements you would write:
:not(div) {
color: red;
}
Caveat: while this rule correctly selects all elements except div, it does not prevent a div from inheriting red color from its parent which is the default behavior.
Try like this:
:not(div){
color: red;
}