I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
Related
In regard to the first CSS rule, it works when i use the 'p' tag by itself. When I apply the 'article' class with or without the 'p' tag, it doesn't work. Why is that? Also the 'hr' tag with the class of 'one' works (which means CSS file is working). This seems so basic. I don't understand why it isn't working. Any ideas?
HTML
<p class=article>{{ post.body|truncatewords:30|linebreaks }}</p>
-- Also tried this
<p class="article">{{ post.body|truncatewords:30|linebreaks }}</p>
external CSS file
p.article {
color:red;
}
hr.one {
border:none;
height: 2px;
background: #cec4c4;
}
HTML Output
<div>
<h1 class=display-4>gdddsasddsg</h1>
<h6><span class="font-italic font-weight-normal">By: </span>gdorman619 <span
class="font-italic font-weight-normal">Published Date: </span> May 28, 2020, 12:24 p.m.</h6>
<p class="article"><p>sdadfsdsfdsfa</p></p>
<hr class="one">
</div>
Are you printing content from a WYSIWYG-editor or something else that is not a pure string? In that case, that content will likely enforce its own markup as inline HTML and external css is not going to work as inline CSS inside HTML has a higher specificity then CSS placed in an external stylesheet, unless you apply !important to the color, which makes me cringe on my behalf.
Your code looks mostly good. To add a class attribute, you must specify the name of the class with quotes, like this:
<p class="article"> Your code here</p>
Hope this helps
Try with this css.
.article {
color:red;
}
.one {
border:none;
height: 2px;
background: #cec4c4;
}
it may help you
I have something like this
<form class="Form">
<FormField>
<label class="FormLabel" ..>
<div class="FormInput">
<div class="InputField">
<input../>
</div>
</div>
</FormField>
</form>
I need to apply styles to FormLabel when input is focussed.
I understand that we cant get the parent selector(Is there a CSS parent selector?)
I want a work around to access the parent using css only (not use jquery)
I tried this using & in LESS
.Form {
.FormField {
.Input:focus & .FormLabel {
border:green
}
}
}
Still no luck :/ .. What am I missing? Thanks!
There is no way, currently, to select the parent of an item using CSS. It must be done with JavaScript/jQuery.
Since there is no way to get the parent item of the item that's in focus (in this case, the input), you cannot change it's style using pure CSS.
I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.
<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Hey does anyone know how I would accomplsh this with pure css.
<a id="link"><span>Some Text</span></a>
<div id="someDiv"></div>
Make the spans "Some Text" a certain color when someDiv is moused over.
Not sure if this is possible. Thank.
Due to the way CSS selectors work, there's no previous sibling selector. So with your existing markup you can't use pure CSS to do it.
If the link were to come after the div, however:
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
The selector to use would be #someDiv:hover + #link span.
This might be possible if you have a parent element to associate the css hover class with. For example:-
<div id="parent">
<div id="someDiv"></div>
<a id="link"><span>Some Text</span></a>
</div>
& den use the following css.
#link
{
position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/
/*You can position this anchor tag wherever you want then */
}
#parent:hover > link > span
{
color:#000;
/*enter code here/*
}
Pure css? Working in all browsers? Not possible in this structure.
I think this should work, assuming these two elements share the same parent and a#link is the first child of that parent element.
#parent div#someDiv:hover ~ a#link:first-child span {
color: blue;
}
IE6 doesn't support it, but if you can live without IE6 (and you really should, IMO), you should be okay.