Hello,
I have seen a strange behavior while using CSS HTML selector and class selector.
in HTML file I have this code:
<div class="content">
<h1>Registration Form</h1>
</div>
And in Css file I have:
.content
{
margin:auto;
width:600px;
border:solid 1px black;
background-color:White;
padding:10px;
}
h1
{
color:Gray;
font-size:18px;
border-bottom:solid 1px orange;
}
Above code works perfectly.
When I changed h1 HTML selector to Class selector by writing .h and h1 class="h" STILL it worked perfect.
BUT
when I changed .content class selector to div (ie I converted class selector of div tag to DIV HTML selector ITSELF) then the output changed.
It did not show me the text Registration form at all and showed horizontal lines above and below the area where Registration form text would be present.
why is this strange behavior?
Does it proves that class selector and HTML selector behave differently even if applied with SAME style rule effect?
A class selector is more specific than a type selector.
When you change the type selector to a class selector, the first selector still has precedence, just because it comes first.
When you change the first class selector to a type selector, the second selector becomes more specific, and takes precedence.
Related
http://jsfiddle.net/m7qLdstp/1/
<style>
:not(div p), p{
color: red
}
</style>
<p>This is a paragraph that should be red.</p>
<div><p>This is a paragraph that should not be red.</p></div>
Is it possible to use the css :not selector to (in this case) turn all <p> color red, except for any <p> instead a <div>?
I ran a few different variations on jsfiddle but cannot get it to work?!
The following will change the color of all <p> elements that are not direct descendants of a <div>:
:not(div) > p{
color: red;
}
Demo fiddle
You could just target them separately
p{
color: red
}
div p{color:black}
fiddle
it works because div p is more specific than p
According to CSS-Tricks, :not() selector can take only a "simple selector", defined as:
a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector
but:
may not contain additonal selectors or any pseudo-element selectors.
However, as other answers suggest, there are ways you could work around this issue and accomplish the behavior at least in this example case and other simple cases.
I am using this CSS code:
<style type="text/css">
#TicketUpdateLeft {
border:1px solid black;
colour:#999999;
}
#TicketUpdateLeft .Customer {
background-colour:#000000;
}
</style>
and this HTML:
<div id="TicketUpdateLeft" class="Customer">test</div>
but the background colour is not showing as #000000 but the border and text colour works fine
It's color not colour.
Ex: background-color:#000000; and color:#999999;
And based on your code, you do want to use #TicketUpdateLeft.Customer (no space between them).
jsFiddle example
You shouldn't have a space between #TicketUpdateLeft .Customer so it should be
#TicketUpdateLeft.Customer
If you are having a space between the id and the class then the meaning of the selector changes, it will look for an element having a class called .Customer which is nested inside an element having an id of #TicketUpdateLeft
Also you have spelled color in the wrong way, it's color and not colour
Demo
Also, you won't need a selector like #TicketUpdateLeft.Customer because ID's are unique in the document, so over specifying isn't required, but if you are using the same id with different class in some another document, than your selector makes sense.
It needs to be
#TicketUpdateLeft.Customer
instead of
#TicketUpdateLeft .Customer
The way you have it, the CSS is targeting a child element of #TicketUpdateLeft with the class Customer
And colour should be just color
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I want to prevent this CSS selector from being applied to all elements in the page:
input {
color:red;
}
This will make the text red for <input>s of every type, but I want to exclude one input from this without changing the selector or style of this CSS rule. The element should have the default style (how it is when you have no css on the page).
You can use the not selector. Since an input field should have a name, you could exclude it by using:
input:not([name="exludeme"]) { }
This method won't work in IE8 and earlier versions. To support ie7 and ie8 too, you could use the attribute selector. In this case you have to reset the field:
input[name="exludeme"] { /*add all your reset styles here*/ }
add an id for the different one and apply it just for him, and to make sure that no other css will overwrite the css you choose use !important
html:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box" id="diff"></div>
css:
div.box {
background-color:red;
width:50px;
height:50px;
position: relative;
}
#diff{
background-color:black !important ;
}
check this: http://jsfiddle.net/y32Wv/
note: !important is optional, depends on the selector position inside the file, but in cases where it might be overwrite by other css rule (for example if someone change the order of the css rules) it will stop working right, and !important will prevent it from happening.