how is it possible to make one class inherit from another in the CSS file?
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:1px 6px 2px 6px;
cursor:pointer;
}
input.btn_light {
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
here I want input.btn_light to inherit from input.btn.. how is that possible to do in the CSS file?
#vadiklk
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:3px 6px 4px 6px;
cursor:pointer;
}
input.btn_light {
input.btn;
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
Give the HTML element both classes:
<input type="submit" class="btn btn_light" value="Action" />
According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.
As an alternative to the accepted answer, you can also do the following with your CSS. The difference being that instead of using multiple class names where it will be used, this way uses multiple class names in the CSS to say "use this style and this style". Then, the reference (the input button in this case) only uses one class name.
In the end, it accomplishes the same thing as the accepted answer.
Note: I changed the value of the borders because I wanted to use values that were less subtle for the snippet.
input.btn,
input.btn_light {
border: 2px solid red;
background: url('gfx/layout.btn_bg.png');
color: black;
font-weight: bold;
margin-right: 6px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
input.btn_light {
border: 2px solid green;
background: url('gfx/layout.btn_light_bg.png');
}
<body>
<input type="button" class="btn" value="Regular">
<br>
<input type="button" class="btn_light" value="Light">
</body>
SCSS/SASS example:
HTML
<h1><span class='section-title'>Some heading!</span></h1>
<h2><span class='section-title'>Some heading!</span></h2>
<h3><span class='section-title'>Some heading!</span></h3>
<h4><span class='section-title'>Some heading!</span></h4>
<h5><span class='section-title'>Some heading!</span></h5>
<h6><span class='section-title'>Some heading!</span></h6>
SCSS
// This will style every .section-title element within
// a heading the same as the heading.
.section-title {
h1 & { #extend h1; }
h2 & { #extend h2; }
h3 & { #extend h3; }
h4 & { #extend h4; }
h5 & { #extend h5; }
h6 & { #extend h6; }
}
Related
I want the input:valid effect to trigger at the outer div just as the
focus-within does. Is there any way?
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
<div class="inputBox">
<input type="email" id="email" required placeholder="E-mail" />
</div>
Try to use input without period in front of it. Because input is a tag and not the class unlike .inputBox
.inputBox {
border-bottom: 1px solid #000;
transition: .3s;
}
input {
width: 80%;
border: none;
outline: none;
background: transparent;
}
.inputBox:focus-within,
input:valid {
border-bottom: 1px solid #fff;
}
:has (which is yet to be implemented in browsers):
The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
.inputBox:has(> input:valid)
I know this is unhelpful to you now, but might be to others in the future.
Hi I am trying to write css classes as per the specification given. For example, If i am designing a button they have given specification as below.
Normal:-
Hover:-
Below is my html code which displays button.
<input type="button" class="btn" value="Button"/>
I want to write classes for the above button as per the specification provided. May i know how to write this? I have tried something below but correct me if i am wrong.
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
Also how can I write css for the hover as per the above specification provided? Any help would be appreciated. Thank you
Create another rule with :hover selector
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover {
background: rgb(46,146,250);
}
<input type="button" class="btn" value="Button"/>
Use CSS pseudo-selectors, also you can combine styles for multiple selectors (separated by coma)
/* styles for the element */
.btn {
background: rgb(12,116,218);
border: 1px solid #0C74Da;
border-bottom: rgb(0,76,151);
}
/* styling when on hover */
.btn:hover {
background: rgb(46,146,250);
border: 1px solid #2E92FA;
}
/* styles for both cases */
.btn, .btn:hover{
font-size: 13px;
color: white;
}
<input type="button" class="btn" value="Button"/>
You can write css as per below:
.btn {
background: rgb(12,116,218);
border: rgb(12,116,218);
border-bottom: rgb(0,76,151);
}
.btn:hover{
background: rgb(255,0,0);
}
.btn:active {
background-color: yellow;
}
.btn:visited {
color: black;
}
<input type="button" class="btn" value="Button"/>
For better documentation check this
I simply want .work-description to have a bottom border also when .project-link is hovered.
.work-description { padding-top:50px; width:50%; margin:0 auto;}
.project-link { font-size:3em; text-decoration:none; }
.project-link:hover { border-bottom: 3px solid #000; }
.project-link:hover + .work-description {
border-bottom: 3px solid #000;}
I am not sure if you are aware that the + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, the element having work-description class has to immediately after the project-link class.
If you have the right html (as shown below in the example), your code just works fine.
.work-description {
padding-top:50px;
width:50%;
margin:0 auto;
}
.project-link {
font-size:3em;
text-decoration:none;
}
.project-link:hover {
border-bottom: 3px solid #000;
}
.project-link:hover + .work-description {
border-bottom: 3px solid #000;
}
<input type="button" value="abcd" class="project-link">
<div class="work-description">some random text here</div>
Hope this helps!!!
Consider a <div class="well well-large well-small" /> with the following styles from twitter bootstrap https://github.com/twitter/bootstrap/blob/master/less/wells.less
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #wellBackground;
border: 1px solid darken(#wellBackground, 7%);
.border-radius(#baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding: 24px;
.border-radius(#borderRadiusLarge);
}
.well-small {
padding: 9px;
.border-radius(#borderRadiusSmall);
}
How does CSS decide which padding to apply in situations such as this? Will it be 19px, 24px, 9px or undefined value? My understanding of specificity is rudimentary and it seems that there is a specificity tie in this case between the .well .well-large and .well-small
If the specificity is equivalent, they are applied in order of definition.
Example:
.a {
color: red;
}
.b {
color: blue;
}
<span class="a b">this is blue</span>
<span class="b a">this is blue</span>
If you're curious, here is the rules of how styles are cascaded.
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !