I created a div with "commonDiv" id (example), then is create multiple divs inside it, div, div in divs etc. All divs contains button(s). I want to add a common style for the buttons. I'd like to add a css only one settings for it.
I tried the following but it's not worked:
div#commonDiv .button{
background-color: #4CAF50;
border: none;
color: white;
}
What's the right way?
Well the best way is mentioning class for all of your <div>s and then adding style in the CSS code using your class.
.your_class_name {write any style you want for all of them !}
Try it this way:
div#commonDiv button{
background-color: #4CAF50;
border: none;
color: white;
}
I removed the period before .button.
The rules you declared didn't match the <button> tag but any element that has class "button"...
If it doesn't solve your issue feel free to leave a comment.
You can see a very good document about CSS selectors here. And if your buttons have not any class may be this code fix your problem:
div#commonDiv button{
...
}
I figured out the solution which is the following: div#commonDiv input[type=button]
Related
I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
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.
How can I make multiple H3 tags using different text style & font size inside post body?
My H3 CSS is look like this
.post h3{
border-top:1px dotted #84ce31;
border-bottom:1px dotted #84ce31;
font-size: 10pt;padding:3px;
}
Any ideas?
Give each one of them a class:
.post h3.class1 { color: white; }
.post h3.class2 { color: black; }
.post h3.class3 { color: red; }
there can be done by either adding the id or the class like
.post h3.#hea1{ color: white; }
.post h3.#hea2{ color: black; }
.post h3.#hea3{ color: red; }
or as class explained above
not point is that what should be use ..to know that you must know
difference between id and class
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
note : There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn't work.
I would give them all ID's. ID's are meant for special Identification of elements that only exists once and use classes for more common recurring styles with just the h3 style at a default that will be appearing most often. All that said the answer is not wrong either, I am just considering design styles.