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/
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.
For example, I have HTML like :
<div class='page'>
<span>2</span>
<span>2</span>
<a>1</a>
<a>6</a>
</div>
How can I style for first child a
I used like this : .page a:first-child {color:red}
but it doesn't run.
Use first-of-type instead of first-child
.page a:first-of-type{
color:red;
}
The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.
Taken from MDN Documentation. You can find more details & examples here.
Explanation : :first-child not working as expected
As Pranav c said, you can use
.page a:first-of-type { ... } or .page a:nth-of-type(1) { ... } but neither of them will work in IE8
So if we can assume that the <span> is always going to be there, then
.page span+a { ... }
will ensure that only the first a after the span will be styled and this is as good as you can get cross-browser right now.
Example: FIDDLE
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
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.
I've got a container div that could contain any number of children. I want to target all links that are direct descendants of the container div, and can do so with .container > a. But then, I want to give a different styling to the first link that is a direct descendent of the container. I assumed .container > a:first-child would perform this task, but it would seem not.
Note that using .container a:first-child would actually target the first two "incorrect" links, so I can't use that, I don't think.
Obviously I can rework the structure of the HTML, but I'd like to see if there's a CSS solution here.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container > a
{
background-color: plum;
}
.container > a:first-child
{
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div>Incorrect link</div>
<div><div>Incorrect link 2</div></div>
<p>Some text</p>
Category 1
Category 2
Category 3
</div>
</body>
</html>
you can use .container > a:first-of-type
jsfiddle : http://jsfiddle.net/cP7jZ/
.container > a:first-child will work, as you can see from this example