Consider a html element
<input type="text" class="name-input" />
Style sheet has following css
.name-input {
//some styles here
}
[type="text"] {
//other styles here
}
But in output it displaying both styles for the element. I tried by giving #id to input element as well still it's cascading both. Can someone explain me a way to get only .name-input styles to element. Thanks in advance
If this style is required for all other text boxes and only this text box is exception, use id as follows
<!DOCTYPE html>
<html>
<Style>
.name-input {
background-color: #45a049;
}
input[type="text"] {
width: 100%;
}
#id1{
width: 50%;
}
</Style>
<body >
<input id="id1" type="text" class="name-input" />
</body>
</html>
in id1 selector give whatever you require to over write the type selector.
Selectors has Priority.
Resource:https://developer.mozilla.org/en/docs/Web/CSS/Specificity
id selector has High priority than class Selector and attribute Selector.
priority class Selector is same attribute Selector and Each one come next other get High priority.
use of .name-input { after of [type="text"]{ like this:
[type="text"] {
//other styles here
}
.name-input {
//some styles here
}
when do it, .name-input{ rules overlay [type="text"]{ rules.
[type="text"] {
background-color: blue;
}
.name-input {
background-color: red;
}
<input type="text" name="" class="name-input">
If you use of Id Selector,place rule not important,Because id has High priority.
#myId {
background-color: green;
}
[type="text"] {
background-color: blue;
}
.name-input {
background-color: red;
}
<input id="myId" type="text" name="" class="name-input">
Related
for example I have form element in multiple places like
form {
display: table;
margin: 20px auto;
text-align: center;
}
Now this style properties are overriding another form element's style properties, now form does not have id attribute , I gave the form a name & tried with name attribute but it is not working.
form[name="myform"] {
display: table;
margin: 20px auto;
text-align: center;
}
Please suggest a solution
You have multiple choices, but a simple way is to use different IDs or different classes like below:
<form id="first"> </form>
<form id="second"> </form>
For each page use another CSS style with new define element.
OR Use Class like class="form_1"
OR Use ID like id="form_1"
OR For no rewrite use like font-size: 18px !important
assign classes to your form tag, like:
<form class="x"> ... </form>
and set up CSS for those classes:
.x {
color: red;
...
}
Concerning question in comment: Here is an example that demonstrates that this works (note the class color overriding the form color):
form {
display: block;
margin-top: 0em;
color: blue;
}
.x { color: red;
font-size: 24px;
}
<form action="demo_form.asp" class="x">
First name: <input type="text" name="FirstName" value="Jane"><br>
Last name: <input type="text" name="LastName" value="Doe"><br>
<input type="submit" value="Submit">
</form>
I've the following HTML
<form>>
<div class="form-group">
<div class="search-col">
<input type="text" class="form-control">
</div>
<div class="search-col">
<input type="text" class="form-control" >
</div>
</div>
</form>
<form>>
<div class="form-group">
<div class="search-col1">
<input type="text" class="form-control">
</div>
<div class="search-col1">
<input type="text" class="form-control" >
</div>
</div>
</form>
I want to over-ride the behaviour of form-group and form-control of class search-col, but not of search-col1. How can I do that?
this is what I'm trying
.form-group .form-control .search-col{
outline: none;
background-image: none;
-webkit-background-size: none;
-webkit-box-shadow: none;
-webkit-transition-duration: none;
}
Your order is wrong on your selectors. It should be:
.form-group .search-col .form-control {...}
CSS targets in the order of the parent/child relationship of the DOM elements. This is basically saying style the .form-control class inside of the .search-col class that is inside of the .form-group class.
Your HTML structure does not match your CSS selector.
It should be:
.form-group .search-col { ... }
Or, for that matter, it could even be:
.search-col { ... }
Are you trying to style the individual containers? As others have pointed out ensure the order of the selectors is correct. You shouldn't really have to 'override' anything, as the styles are not the same in each section. I've included a sample image below.
.form-group {
background-color: #ccc;
padding: 20px;
}
.form-group {
padding: 10px;
margin: 5px;
border: 2px solid black;
}
.form-control {
background-color: #abc;
}
/* Notice how each class gives a different style */
.search-col {
background-color: #75AD63;
padding: 10px;
}
.search-col1 {
background-color: #A1D490;
background-origin: ;
padding: 10px
}
If you want to override a specific element which is a child of another div, you can use the right angle bracket to select them like I did below. The image connected is the output.
.form-group > .search-col > .form-control {
background-color: red;
}
Example Styling
Notice how I didn't change the original style of the form-control class.
I am new to web development, I have tried css stylesheet with simple HTML element and it worked well, when i specified element name:
label {
color: green;
}
this would be applied to all label tags, but is there any way to apply stylesheet to single element? For example: There are 2 labels, one is green and second is blue, How can this be achieved?
There's lots of ways to accomplish this. There's lots of css selectors like ID, classes... See css selectors reference
Best way to achieve what you want is to use classss. See classes
.red {
color: red;
}
.blue {
color: blue;
}
<label class="blue">
I'm blue
</label>
<label class="red">
I'm red
</label>
You could do
<label name="green">
label[name=green]{
color:green;
}
Use id of the element if you want to target a specific element. Example:
#labelId{
color: green;
}
<label id="labelId">Some Text</label>
Alternatively, you can also provide specific class name to the element. Example:
.label-class{
color: green;
}
<label class="label-class">Some Text</label>
You can do that using html attributes such:
class, id, data-nameOFData for any of HTML element
.class {
color: blue
}
#id {
color: green
}
div[data-test] {
color: yellow
}
<div class="class">class</div>
<div id="id">id</div>
<div data-test>data</div>
name , type and for for input elements
label[for="textInput"] {
color: aqua
}
input[type="text"] {
color: brown
}
<label for="textInput">label</label>
<br>
<input type="text" name="textInput" value="name" />
href for anchors tags and src for images
a {
padding: 10px;
background-color: deepskyblue
}
a[href*="google"] {
background-color: yellow
}
youtube
google
Also you can select any element without defining any attribute for it if you know his index using CSS pseudo selectors :first-child , :nth-child(n) , :last-child , :first-of-type , :nth-of-type(n) , :last-of-type , :nth-of-type(even), :nth-child(odd) MDN , w3Schools.
div {
width: 100px;
height: 50px;
}
div:nth-of-type(even) {
background-color: cornflowerblue
}
div:nth-child(3) {
background-color: coral
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
I have 20 inputs in a page that are styled as buttons using the class property (that is, in the css I define borders, padding, width, etc).
But I want each one to have a different background color. In my current CSS I have 20 classes (one for each input) which are copies of all the style properties except for background-color.
It is working OK like this, but I feel somewhat uncomfortable repeting code. In there a very simple way to define most of the properties for all inputs (borders, padding, width...) and then specify the background-color, one for each input?
HTML
<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">
CSS
.btn{
border:1px solid grey;
width:50px;
height:10px;
padding:10px;
margin: 10px;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.black{
background-color:black;
color:white;
}
.orange{
background-color:orange;
}
Here is the fiddle
You can use multiple classes on elements and use a common class on the elements for the shared styles and then a different class (or id) for the custom styles specific to that element.
e.g.
HTML
<input type="text" class="input-class red" />
<input type="text" class="input-class green" />
CSS
.input-class {
margin: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
You could use a different selector to target all text inputs rather than having a common class aswell:
input[type="text"] {
margin: 0;
}
As well as the above, you can create more specific selectors like:
.input-class.red {
background-color: red;
}
.input-class.green {
background-color: green;
}
input[type="text"].red {
background-color: red;
}
input[type="text"].input-class.red {
background-color: red;
}
Which will only target elements that match those selectors, situations where this might be useful is when you might have a class with the same name elsewhere that you don't want to be affected.
For example you might have already:
.red {
color: red
}
So you don't want an input with red text on a red background so you can chain the class selectors together to be more specific.
Like your "subclass":
.class {
/* for <elem class="class"> only */
}
.class.subclass {
/* for <elem class="class subclass"> only */
}
Is there a very simple way to define most of the properties for all
inputs (borders, padding, width...) and then specify the
background-color, one for each input?
Firstly, define the styling for all inputs, e.g. (or use a shared class etc):
input{
border:...
padding:...
}
Then, if the inputs are all children of the same top level parent, you can isolate specific ones using the :nth-of-type selector:
input:nth-of-type(1){
background-color:red;
}
input:nth-of-type(2){
background-color:blue;
}
Alternatively, provide each with a relevant class designation
There is not in native CSS, but you have other ways of doing this at your disposal:
You can define a common class that holds all of the style that are common across the inputs:
.my-inputs {
border 1px solid #ccc;
padding: 15px;
}
and then you can modify that as needed
.my-inputs.city {
width: 100px;
}
.my-inputs.state {
width: 50px;
}
So that in your markup, you can do things like this:
<input type="text" class="my-inputs state">
Another way you can do this is to use a CSS preprocessor which does afford you the ability to do class inheritance. Take a look at the documentation for LESS and SASS:
http://lesscss.org/
http://sass-lang.com/
Given the following html
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
You can style the input on focus using
input:focus { background: green; }
Is there a way of also styling the <label /> without JavaScript?
Thanks all
No. there is unfortunately no predecessor selector in css
input:focus -+ label { ... }
would be lovely.
having the label after the input would be dooable:
input:focus + label { ... }
you could use some positioning to display before...
For completeness, if your input field is within the label you can use focus-within:
HTML:
<label>
<input name="example" type="text">
</label>
CSS:
label:focus-within {
background: #DEF;
}
UPDATED
Make sure you check the draft as this may change: https://drafts.csswg.org/selectors-4/#relational
The :has() relational pseudo-class will allow the selection of parents for example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
This can be combined with other selectors such as :focus, :active or :not to offer a lot of potential.
Unfortunately browser support isn’t great at the time of writing: https://caniuse.com/#feat=css-has
Adding this for people finding this page in the future. CSS4 will have a parent selector allowing you to choose what element to apply the style to:
I think the current spec allows you to specify which item is matched with a ! sign - the subject selector.
label! > input {
font-weight: bold;
}
This allows far greater control than just parent, for example in this scary chain below the p tag is the target!
article > h1 + section > p! > b > a {
font-style: italic;
}
You can use an attribute selector:
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.
That will obviously only work for that specific ID. If you would like it to work for all IDs, simply leave out the ID:
label[for]:focus,
label[for]:active {
/*styles here*/
}
This will now work for all labels with a for attribute.
If you need something in between, you'll need to use classes.
You can, so long as the label follows the input in the Mark-up:
input:focus + label,
input:active + label {
/* style */
}
Okay the idea is to wrap the input, label, help, error etc. in a Flexbox Container.
Then use the + selector, to select the label element.
Note: it will work only when <label> comes after <input>
Then you define the <label> order by using the flexitem order property.
Sure you can also using classnames.
.container {
display: flex;
flex-direction: column;
}
input {
border: none;
}
label {
order: -1;
}
input:focus {
border: 1px solid red;
}
input:focus + label{
color: red;
}
<div class="container">
<input id="username" />
<label for="username">Username</label>
</div>
Yes, of course you can.
You'll need to:
Group both label and the form into a parent element (like a div)
Style the label with focus pseudo selector selector for the parent, ie .parent:focus label { color: green }
You can see a very minimal sample at jsfiddle I made.
<div class='workarea'>
<div class='hasinput'>
<label>Label 1 (should be green when active)</label>
<input />
</div>
<div class='hasinput'>
<label>Label 2 (should be green when active)</label>
<input />
</div>
</div>
.workarea {
max-width: 500px;
}
label,
input {
width: 100%;
}
.hasinput {
margin-bottom: 1rem;
}
.hasinput label {
color: blue;
}
.hasinput:focus-within label {
color: green;
}
Give your input button a style class
css style:
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
and the input html:
<input name="Bestil2" type="submit" class="book" value="Book møde" />
I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps.
Good luck :-)
Here is an alternative usign CSS grid:
As some sugested if the label is after the input then using flex or in my case using CSS grid you can place the label first.
body {
font-family: Arial;
}
.form-field {
display: grid;
gap: 4px;
}
.form-field label {
grid-row: 1;
font-size: 12px;
color: #737373;
}
.form-field input {
outline: unset;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #737373;
}
.form-field input:focus {
border-color: #328dd2;
}
.form-field input:focus + label {
color: #328dd2;
}
<div class="form-field">
<input id="myinput" />
<label for="myinput">
My Input
</label>
</div>
This can be done if you target browsers that support flexbox - see this: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
For brevity, the css there is minimal but you'll need some browser specific prefixes to extend support to somewhat older browsers.