Here is an sample example
<html>
<head>
<style>
.test > input { //this is wrong.
color:red;
}
</style>
</head>
<body>
<div class="test">
<div>
<input></input>
</div>
</div>
</body>
</html>
What I want to do is apply a style to input element. How to select a input element. with the help of div's css style name.
you can just use .test input (which will apply to every input in <div class="test">).
Your CSS with > only selects direct descendants
If you want to apply style to input using div with class="test", you can do like this
<style>
.test > div > input {
color:red;
}
</style>
div.test input{
}
will style all inputs nested in the div of class test
div.test input:first-child{
}
will style only the first nested input.
the ">" operator only styles directly descendent elements, so it will not style your inputs because you have div.test > div > input, the div in between div.test and input makes it so the input is not directly descendent to div.test
As none of the other answers have mentioned this before, for this particular case you could also use the * selector. It matches descendants that are grandchildren or later descendants. You would use it like so: .test * input.
Related
Is it possible to style another element on :focus of a specific element?
Something like:
input:focus #header {
display: none;
}
I tried doing that but it didn't work.
Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.
.input:focus #header
That is applying selecting all #header where they are a descendant of input
If its a sibling so you want, use the next sibling selector +:
input:focus + #header
For more information on child/sibling combinators
you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp
HTML:
<button>button</button>
<div class="div1">div1</div>
CSS:
button:hover ~ .div1 {
color: red;
}
So you hover over the button BUT the div1 element gets styled.
Just make sure that the BUTTON element is first and the element you are styling is SECOND.
I have a chunk of HTML I'm unable to edit (without using JavaScript).
I'm trying to hide a paragraph with CSS. The paragraph doesn't have an id. Is there any way to target only it and not its sibling <p> with CSS?
HTML:
<div id="foo">
<div></div>
<p> this is the paragraph to hide</p>
<p> this one should not be affected</p>
</div>
It depends on your markup structure. If the <p> is the first child of its parent, you can use :first-child pseudo-class as follows:
#foo p:first-child { /* or simply #foo :first-child */
background-color: gold;
}
WORKING DEMO
Note: If you want to select only the direct <p> child, you should use the children selector (a > b) as: #foo > p:first-child.
But if there are other siblings before the first <p> element, you can use CSS3 :first-of-type pseudo-class to select the first <p> element in the children tree of its parent:
#foo p:first-of-type {
background-color: gold;
}
WORKING DEMO
Again, for the direct child, you can use #foo > p:first-of-type.
From the MDN:
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
You can refer to my answer for further info.
It's the first child of its parent, so you can unambiguously select that:
#foo > p:first-child
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 have several <p> elements in my HTML body. I only want to show the first two paragraphs, and set display:none to all paragraphs after. Why does the following code not work?
<html>
<head>
<style type="text/css">
p:gt(2) { display:none; }
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>
My code still shows all 4 paragraph elements in Chrome web browser.
How do I correct my code to achieve the objective I originally stated?
If they're siblings the easiest approach with some backwards compatibility would be:
p + p ~ p {
display: none;
}
JS Fiddle demo.
You could also use:
p:nth-of-type(2) ~ p {
display: none;
}
JS Fiddle demo.
References:
CSS Selectors.
CSS :nth-of-type() pseudo-class.
Adjacent sibling (+) combinators.
General sibling (~) combinators.
:gt is just a jQuery short hand,
to select it in css:
p:nth-of-type(n+3)
You can use sibling selector:
p + p + p {display:none;}
Other than the first two, it selects all!
jsFiddle: http://jsfiddle.net/KK3mk/
Can someone explain to me why this doesn't work?
<html>
<head>
<style>
body:first-child
{
color:#f00;
}
</style>
</head>
<body>
<div>I should be red.</div>
<div>This is not red.</div>
</body>
</html>
From what I've read, the first-child selector should select the first div object from the body tag. If it's not selecting the div element, what is it selecting?
The :first-child pseudo-class in body:first-child operates on the body tag, so its the body tag that is a first child of its parents that will be selected, if you want the body's first child use the child selector
body > :first-child{
color:#f00;
}
this will give you the first child of the body.
To target the first div, you need to do body div:first-child. Right now (I assume) you're just selecting the first-child body. (Actually I'm not entirely sure what you're selecting right now, come to think of it. I don't think the first-child selector is valid to hang directly on the body tag.)
body div:first-child {
color:#f00;
}
This CSS will color it as you expect. Read it as "the div that is the first child of body."
Your CSS is saying select any BODY element that is the first child of its parent element which would be the HTML element. BUt HEAD is the first-child not BODY.
At least I think that's correct :-)
To target the first div of body you can use this,
body div:first-of-type {
/* style */
}