I am trying this to central justify the paper card heading:
paper-card [heading]{
#apply(--center-justified);
}
but it does not seem to help. kindly suggest
heading is not an attribute so you cannot write like that.
You basically need to style the .title-text element inside the shadow dom, so use this instead -
paper-card::shadow #shadow .header .title-text {
display: flex;
justify-content: center;
}
Or use the polymer iron-flex-layout -
paper-card::shadow #shadow .header .title-text {
#apply(--layout-vertical);
#apply(--layout-center);
}
Update
Thanks to #sfeast for pointing it out. Since shadow selectors will be deprecated, the above styles need to be applied to the mixins like this -
paper-card {
--paper-card-header: {
#apply(--layout-vertical);
#apply(--layout-center);
};
}
The accepted answer is going to break since the shadow selector is/has been already I believe, deprecated.
The --paper-card-header mixin is available for what you would like to do. See the example for using mixins here - https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
Related
So my situation is that I'm working on a personal portfolio project (using React and Django but likely not relevant for this question), and each project is going to have it's own styles. However I want my website to essentially be a catch all for anything I want to do. Therefore the site has it's own unified stylings whilst each project individually might have different styles.
The specific situation is that with buttons. I have added an all: unset; to my base button styles to ensure that I get to style each button type individually (I am also accounting for focus and accessibility in case that's a concern). My hope was to essentially build my own "default" button style that's completely overridden if any styles are applied via a higher selector. So for example:
button {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
// all: unset;
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
Here, the button on the right has all the same styles but with a different background colour. However ideally what I'd like would be what happens if you uncomment all: unset; in .green, where all styles are removed and you're left with a blank canvas onto which to write again. Obviously adding all: unset; to the class selector gives my desired result, but I was wondering if there was an easier way without having to specify for every new style? Adding multiple all: unset; tags throughout the styles seems untidy but I don't know of any better way unfortunately. Can anyone help?
In coding language, I essentially want the following logic but in CSS:
if (no selectors in element) {
default-styles;
} else {
selector-styles;
}
Happy to provide any extra info if necessary.
an idea can be to used the css :not selector on default style to avoid specific class to use it
your default style will do the all: unset but not the specific one
button:not(.green) {
all: unset;
padding: 1rem 2rem;
background-color: grey;
color: white;
}
.green {
background-color: green;
}
<button>Submit</button>
<button class="green">Submit</button>
The easy answer is, just include
paper-button{
background: black;
}
, but that wouldn't restyle the element if it is contained in another element. The solution used to be
html /deep/ paper-button{
background: black;
}
which still works fine, but is deprecated from the Shadow DOM spec. So what is the proper solution?
PS. Purely to be complete in case it somehow matters: What I actually want to reproduce properly is
html /deep/ paper-button.main{
[...]
}
You can use CSS custom properties to change the paper-button style globally.
Since paper-button exposes the --paper-button mixin, you can try the following inside your document -
<style is="custom-style">
simple-dialog, paper-button {
--paper-button: {
background-color: black;
color: white;
};
}
</style>
Have a look at this plunker.
If for example, I have a lot of CSS styles that only have to apply to objects within a div #container. Is it possible to instead of write #container in front of all, have another type of selector? So I don't have to write it for EVERY object within the div #container?
HTML
<div id="container">
<div class="letter">a</div>
<div class="letter">b</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
<div class="letter">c</div>
<div class="number">3</div>
CSS
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
I want to write a rule for every .letter and .number within #container.
Ofcourse I'm only reproducing my issue here, but is there a possibility to change the rules of .letter and .number so it applies only to #container without having to change it 2 times (2 times in this reproduction)? (In my issue it's about 30 objects).
I tried a #container selector before those rules, but without succes. It breaks the styles.
My CSS attempt:
#container {
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
}
Does anyone know a solution or do I have to manually apply #container in front of every rule like this (which I want to avoid cause it's a lot of work!):
#container .letter {
font-size:25px;
color:green;
}
#container .number {
font-size:30px;
color:red;
}
YES, CSS is quite stupid and simple, you have no other choose than having #container in front of each class.
BUT
Developers are lazy and created a pre-processing language to add some crazy functionality. Currently, two alternatives : SASS and LESS
But using those technology you can write your styles like this :
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
and then automatically generate a CSS file like that :
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
This is called "Nesting" and is only one of the many stuff you will love.
Which one to use between SASS and LESS ?
They are similar, my recommandation is us an existing framework and look which one is available. For exemple bootstrap use LESS and Foundation use SASS ... but both are quite similar.
I use both daily, and have some preference to SASS, but that my own opinion.
In pure CSS, I can't think of a better way of doing it than what you're already doing - which is a lot of repetitive work as you've pointed out.
Your first "CSS attempt" is the correct approach, but you will have to use SASS or LESS if you want to be able to nest selectors like that. Pure CSS doesn't support it.
I strongly recommand that you look into SASS/LESS, they offer much more than just nested selectors and they will make your CSS coding a lot more enjoyable overall.
CSS is, by design, a very simple language. There is no way (yet) to achieve what you want with pure CSS.
CSS preprocessors such as LESS and SASS have stepped in to help alleviate the tedium of this and other common problems with traditional CSS (such as variables). Your nested example is exactly right in SASS. These all compile to plain old CSS, but will necessitate a change to your front-end build process.
If you can't make use of a preprocessor, find + replace is your friend.
The answer is No.
You can't do that without using a preprocessor like less or sass.
Take a look at SASS for example http://sass-lang.com/guide in the "Nesting" section you can see that's exactly the feature your're looking for.
If you want to try it follow the instructions should be pretty simple.
The same feature is present in the less preprocessor but my opinion is that SASS is much more powerful and flexible so if you have to start from sketch go for this one.
If you can't go for a preprocessor then preceding every selector with #container is the only way you have.
Using a GWT web app, Firebug says that the following HTML
<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>
is using this CSS.
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
What CSS do I need to write so that this <table> will have style, display: none?
I made 2 attempts: [EDIT - updated .multi-zone and display:none]
.drop-zone .drop-zone-column-66 .multi-zone {
display: none;
}
and
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: none;
}
but Firebug still gives me the CSS shown at the top.
Please advise me.
Strictly speaking, all you should need is:
.maximized-gadget .drop-zone.multi-zone {
display: none;
}
provided that that rule comes after the original rule you gave above:
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.
The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:
.drop-zone.drop-zone-column-66.multi-zone {
display: none;
}
which should set you right (though if I remember correctly this won't work in older versions of IE).
I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.