I'm trying to convert this css to use an attribute "starts-with" selector because I have several anchor elements with id attributes that start off with the same value...
a#cta_button_127944_79d30f48-4e68-43c8-949d-a9734a713b32,
a#cta_button_127944_40183a15-c491-4389-b5a8-4cdf099f6003,
a#cta_button_127944_4acbc01a-9116-4540-9bc4-196052464441,
a#cta_button_127944_dc0b71c9-f602-43ac-a318-d18811217e4b
{
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Here is my wildcard..
a[id^="cta_button_127944"] {
background-color: #336699;
color: #fff;
font-size: 12px;
font-weight: bold;
}
Individual selectors work perfectly. The attribute "starts-with" selector is not getting picked up.
Thanks!
Related
I am looking for a way to reduce the repetition in my SASS. I have the following declaration, which is nested inside a selector.
Inside register.scss:
.btn-primary {
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
}
I would like to #extend that inside the selector in another SASS file but i'm unsure if that's possible.
admin.scss:
.btn-primary.upgrade-btn {
font-family: Helvetica;
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
When I have attempted this I get the following error:
Error: complex selectors may not be extended.
Is there a way to do this?
You will need to remove the double class selector and extend using the method below.
.btn-primary {
background-color: $brand-btn-primary;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
.upgrade-btn {
#extend .btn-primary;
font-family: Helvetica;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
<ejs-dropdownlist [dataSource]='data' placeholder='Search Fields' class="ejs-dropdownlist">
</ejs-dropdownlist>
this is my html tag and I want the placeholder to have font-size 15 and color grey.
How to do it?
to do these kind of process, open developer console and inspect to element find class name of element. Then in style.css write the css code. For library element component.css does't work. You need to use style.css
select .e-input::placeholder {
font-size: 15px;
color: grey;
}
select .e-input::-webkit-input-placeholder {
font-size: 15px;
color: grey;
}
select .e-input::-ms-input-placeholder {
font-size: 15px;
color: grey;
}
You can do it with:
select + input::-webkit-input-placeholder { /* Edge */
font-size: 15px;
color: grey;
}
select + input:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 15px;
color: grey;
}
select + input::placeholder {
font-size: 15px;
color: grey;
}
But here you can find something similar: How to change placeholder color of specific input field?
I am working on this website: http://box5155.temp.domains/~grownows/
In the top menu bar, I want "Get In Touch" to have the following CSS working on it so it stands out more:
font-size: 120%;
text-transform: none;
I also want a green border box around it but I haven't even figured that out yet lol.
So I've tried just doing these in CSS but those didn't work (the only thing that strangely worked is changing the font to Escafina.) I did use !important on the font-size and text-transform but that didn't work.
.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-
50.menu-item-link {
font-size: 120%;
font-family: 'Escafina';
text-transform: none;
color: blue;
}
#menu-item-50 {
text-transform: none;
font-size: 120%;
}
So then I gave the "get in touch" the title attribute "getintouch" and tried this:
.a[target="getintouch"] {
text-transform: none;
font-size: 120%;
}
Now I am stuck. I tried without a "." selector before the a too. Any suggestions?
This worked when I tested it:
li#menu-item-50.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-50.menu-item-link a {
font-size: 120%;
text-transform: none;
border: 1px solid #b4d447;
padding: 0 17px !important;
max-height: 34px;
}
I know you can use the display: property to display an inline-element as a block-element, and also other like table-cell etc. However, is there a way to make an element display like any other element? Something like
div.header{ display: h2; }
would be useful. Any way to accomplish this in css, except for overriding all the h2 properties?
If h2 has the following styles:
h2 {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
and you want div.header to look the same...
You can state this in your css:
h2, div.header {
line-height: 24px;
color: rgb(255,0,0);
font-size: 16px;
font-weight: bold;
}
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.