I have a css rule...
tr.my-style td.my-style-2
{
border-top: 1px solid #F00;
}
This gives a red border to every data-cell, in every row in my table. 'my-style' and 'my-style-2' are attached to the html from a generated component.
Where do I place the first-child selector in the rule to only apply the style to the first row in my table?
Here is my actual css using 'get css path' in FireFox...
html.js body div.container div.row div.col-md-9 table#Accounts.dxgvControl_Bootstrap3 tbody tr td table#Accounts_DXMainTable.dxgvTable_Bootstrap3 tbody tr#Accounts_DXDataRow0.dxgvDataRow_Bootstrap3 td.dxgv
But '#Accounts_DXDataRow0' refers to the first row. I want to generalise the rule without using hardcoded identifiers.
I tried...
tr.dxgvDataRow_Bootstrap3:first-child td.dxgv
{
border-top: 2px solid #DDDDDD;
}
You place it at the end of the tr selector:
tr.my-style:first-child td.my-style-2
{
border-top: 1px solid #F00;
}
The :first-child pseudo-class represents the very first child of its parent. Try the sibling selector(~) instead.
/*default*/
td{border:1px solid #333}
/*style of first element*/
tr.my-style td.my-style-2{
border-top: 1px solid #F00;
}
/*style for all the rest*/
td.my-style-2 ~ td.my-style-2 {
border-top:1px solid #333;
}
JSFiddle example
Please check this answer from Lea Verou about a similar question:
https://stackoverflow.com/a/5293095/935077
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}
I am trying to put a bottom border on my link but despite using code pretty much straight from the internet it doesnt seem to want to work.
http://codepen.io/anon/pen/oeLqc
lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
If I wanted a thick border on the bottom of my links, how should I be doing it?
When declaring class selectors in CSS, they must start with .:
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
http://codepen.io/anon/pen/hwsak
Here is a useful article on CSS selectors:
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
The selector lll wont work as is.
If your class is lll then your code needs to be .lll
If it's an ID then it needs to be #lll
Also, is there a reason you're using display: table? That probably isn't helping your link. Maybe try display: inline-block instead? Obviously without knowing the site you're working on it's hard to say.
But changing those two things will definitely help!
You missed a class assignment try:
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
You forgot to use dot(.) before writing the css.
It should be like
.lll {
font-weight:normal;
margin-bottom:5px;
border-bottom: 3px solid blue;
background: #EEE;
display: table;
}
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.
I'm doing this to set a border around input fields:
input[type=text], input[type=password], textarea { border: 1px solid #9BAF31;}
I have client-side validation that adds this class when errors occur:
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
But only the background is set. The border is still the original color. How can i set it with the validation color?
Have you tried
input[type=text].input-validation-error ,input[type=password].input-validation-error, textarea.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
You need to make the rule you want to apply at least as specific as the existing rules.
You could try to add the .input-validation-error above the "input[type=text],input[type=password], textarea". Also, what does FireBug says when you inspect the element?