i want to do the following thing with inline styles:
<div style="color: #00FC0056;">
<h1 style="color: rgba(255, 0, 0, inherit);">Hello, world!</h1>
</div>
I want the alpha value of the color to be inherit.
Is it possible, and if so how can I do this?
You can use CSS vars
<div style="--alpha:.56">
<h1 style="color: rgba(255,0,0, var(--alpha))">Hello, world!</h1>
</div>
Related
I tried to follow this tutorial but I got stuck at minute 52:40. When he is giving the bar height and color, I do the same thing but it doesn't display. Can anyone help me? I would be grateful
.skills__bar,
.skills__percentage
{ height: 5px;
border-radius: .25rem;
}
.skills__bar{
color:red;
}
<div class="skills__titles">
<h3 class="skills__name">Photoshop</h3>
<span class="skills__number">80%</span>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__psd"></span>
</div>
The color property specifies the color of the text. - w3schools
The property applied in the video is not a color, it's a background-color. Try this code below to see the result after you change the color property to background-color.
.skills__bar,
.skills__percentage
{ height: 5px;
border-radius: .25rem;
}
.skills__bar{
background-color:red;
}
<div class="skills__titles">
<h3 class="skills__name">Photoshop</h3>
<span class="skills__number">80%</span>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__psd"></span>
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
I am using this rating widget and I want to get the value for my star rating like 1 star or 2 stars so I can manipulate the image being shown. I want to get the value from the data-title not the name I stored for it.
data-title="stack"
which holds a 5 star rating. I want it to return 5 or 5 star on my console and not just stack.
This will give output Grey / Silver
But I want the integer value stored for it.
Is there any way I can achieve that ?
var data = $('.color-box').data('title');
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="value">
<div class="color-box grey-silver-color-gradient" data-title="Grey / Silver" data-toggle="tooltip" data-original-title="" title=""></div>
</div>
Do you mean this?
console.log($("[data-title^=walter]").find(".rw-ui-star-selected").length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card__side card__side--front card__side--front-1">
<div class="card__description">
<img src="images/Walter_White_S5B.png" class="imgcard">
</div>
</div>
<div class="card__side card__side--back card__side--back-bb">
<div class="card__description">
<p class="text-title drop drop-top">Bryan Cranston</p>
<p class="text-small pad-small drop">As</p>
<p class="text-title drop">Walter H. White</p>
<p class="text-small pad-small drop">A.K.A.</p>
<p class="text-title drop">Heisenberg,<br> Mr. Lambert,<br> Mr. Mayhew<br></p>
<p class="text-small drop"><q>I am the one who knocks.</q></p>
<p class="text-small drop"><q>Say my name.</q></p>
<p class="text-small"><q>All right, I've got the talking pillow now.</q></p>
<!-- <div class="rw-ui-container" data-title="walter bb rating"></div> -->
</div>
<div class="rater">
<div class="rw-ui-container rw-urid-17803414863255154888 rw-ui-star rw-size-medium rw-dir-ltr rw-halign-center rw-valign-bottom rw-style-oxygen1 rw-active" data-title="walter bb rating" data-urid="walter bb rating" style="">
<div class="rw-action-area">
<ul class="rw-ui-stars">
<li class="rw-ui-star-0 rw-ui-star-selected"></li>
<li class="rw-ui-star-1 rw-ui-star-selected"></li>
<li class="rw-ui-star-2 rw-ui-star-selected"></li>
<li class="rw-ui-star-3"></li>
<li class="rw-ui-star-4"></li>
</ul>
<a class="rw-report-link" target="_blank" href="https://rating-widget.com/my-rating-report/star/oxygen1/rating-0-5/" rel="nofollow"></a>
</div><span class="rw-ui-info-container" style="background-color: rgb(255, 255, 255);"><i aria-hidden="true" class="rw-ui-info-nub rw-ui-info-outer-nub" style="border-bottom-color: rgba(0, 0, 0, 0.5);"></i><i aria-hidden="true" class="rw-ui-info-nub rw-ui-info-inner-nub" style="border-bottom-color: rgb(255, 255, 255);"></i><span class="rw-ui-info-inner-container" style="border-color: rgba(0, 0, 0, 0.5);"><span class="rw-ui-info" style="color: rgb(0, 0, 0);">Rate this</span></span>
</span>
</div>
</div>
</div>
</div>
Color should be applied to the data-words, however it is only applying to the cursor. Any ideas what I am doing wrong?
<h2 class="hero__title h1"> Your<span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," style="color:blue" data-delay="100" data-deleteDelay="1000"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>
<script async src="https://unpkg.com/typer-dot-js#0.1.0/typer.js"></script>
You need to consider data-colors where you can specify a different color per word or one color that will apply to all:
<h2 class="hero__title h1"> Your <span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," data-colors="blue,green,red" data-delay="100" data-deleteDelay="1000"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>
<script async src="https://unpkg.com/typer-dot-js#0.1.0/typer.js"></script>
Reference: https://steven.codes/typerjs/docs/index.html#class-typer
In your head tag, try this:
<style>
span.typer {
color: blue !important;
}
</style>
Use data-colors attribute. It is in the documentation
<h2 class="hero__title h1"> Your <span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," style="color:blue" data-delay="100" data-deleteDelay="1000" data-colors="blue"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>
<script async src="https://unpkg.com/typer-dot-js#0.1.0/typer.js"></script>
I am new to CSS !
I would like to overwrite a span style using external CSS. Any suggestions?
!important did not work for me.
Sample code below.
<div class="abc" id= "xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span> </div>
basically I would like to overwrite the #009530 for the text using a external css.
I tried like below external css. It did not work for me.
#xy {
color: blue !important;
}
TIA
Use following css:
#xy span{
color: blue !important;
}
<div class="abc" id="xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
</div>
<span id="xy" style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
css
#xy
{
color: blue !important;
}
There are 2 text on page "ok" and "oops" one is under <footer> another under class=> 'meta'.
I want to verify footer text and I am using
span(:alert){div_element(:class => 'application').div_element(:class => 'txt').span_element(:class => 'app-text')}
but its verifying with meta "class" text "oops" as both have same div path.
How I can locate the span class "app-txt" inside footer specific?
<footer>
<div class="application" style="opacity: 1;">
<div class="txt" style="background-color: transparent;">
<span class="app-txt" style="background-color: transparent;">ok</span>
</div>
</div>
</footer>
<div class="meta">
<div class="application" style="opacity: 1;">
<div class="txt" style="background-color: transparent;">
<span class="app-txt" style="background-color: transparent;">oops</span>
</div>
</div>
</div>
To locate the ok use:
footer .app-txt
To locate the oops use:
.meta .app-txt
footer .app-txt {color: red;}
.meta .app-txt {color: orange;}
<footer>
<div class="application" style="opacity: 1;">
<div class="txt" style="background-color: transparent;">
<span class="app-txt" style="background-color: transparent;">ok</span>
</div>
</div>
</footer>
<div class="meta">
<div class="application" style="opacity: 1;">
<div class="txt" style="background-color: transparent;">
<span class="app-txt" style="background-color: transparent;">oops</span>
</div>
</div>
</div>
Given that you know that the two spans can be differentiated based on their ancestor element, ie the <footer> vs the <div class="meta">, you should include that in your locator.
Solution 1 - Using Nested Locators
The page object could be:
class MyPage
include PageObject
# The span in the footer
span(:in_footer) { footer_element.span_element(class: 'app-txt') }
# The span in the meta div
span(:in_meta) { div_element(class: 'meta').span_element(class: 'app-txt') }
end
As you can see, by including the differentiating ancestor element, ie the footer_element vs the div_element(class: 'meta'), you can get both texts:
p page.in_footer
#=> "ok"
p page.in_meta
#=> "oops"
Solution 2 - Using CSS-Selectors
Alternatively, depending on your comfort with CSS-selectors (or XPath), you could shorten the page object by using the CSS-selectors mentioned by #K.RajaSekharReddy or #PraveenKumar.
Using the CSS-selectors, the page object could be:
class MyPage
include PageObject
span(:in_footer, :css => 'footer .app-txt')
span(:in_meta, :css => '.meta .app-txt')
end
To locate the ok use:
footer >.application >.txt >span.app-txt {
color: blue;
}
or
footer >span.app-txt {
color: blue;
}
To locate the oops use:
.meta >.application >.txt >span.app-txt {
color: orange;
}
or
.meta >span.app-txt {
color: orange;
}