Develop Reference

Best way to apply Style to every other div when an outside style sheet that I have no access to is coming into play?

I'm using BXSlider and attempting to change the background of every even iteration of the slider. The problem is that a css sheet that I do not have access to is affecting all sliders on the page.
Context-
<div class="bx-wrapper">
<div class="bx-viewport">
<div class="bx-slider">
</div>
</div>
</div>
Bx-wrapper and Bx-viewport are added automatically via the bxslider library.
The css sheet (that I have no access to) has the background set to #fff-
.bx-wrapper .bx-viewport {
background: #fff;
}
I am changing the background of the slider with -
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
My main problem is that the original #fff takes precedence and I can only see the above css working when I un-check that style in dev tools. What do you all think the best way to ensure that the above css takes precedence?

It sounds like your style is just being overridden by the existing stylesheet, correct?
To give your style priority over the existing stylesheet, your CSS scoping should be as specific as possible and, if necessary, contain the !important property.
For example, instead of having...
.bx-wrapper .bx-viewport:nth-child(even){
background-color: rgb(245,245,245);
}
... you might want to try...
html body .bx-wrapper .bx-viewport:nth-child(even){ /*or whatever the full scope path to your elements would be*/
background-color: rgb(245,245,245) !important;
}
I hope that's what you're looking for.

How to style css of ionic2-calendar?

I'm working on an app with Ionic 5.0.0, Angular 8 and using the ionic2-calendar plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar.
The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one.
Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:
.monthview-current[_ngcontent-ljn-c3]
And after reloading, it is
.monthview-current[_ngcontent-igq-c4]
So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.
EDIT: I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.

If the styles are present inside the angular component's file it will not be applied due to view encapsulation. You need to specify the styles in the global stylesheet, and also in most you need to add important to the styles.
To elaborate further,
-src
-assets
-calendar.css (add styles here)
-app
-my-calendar
-my-calendar.page.html
-my-calendar.page.ts
-my-calendar.page.css (and not here)
Some commonly needed customizations: (assets/calendar.css)
Apply styles to the selected date:
.monthview-selected{
font-weight: bold;
background-color: #F1F1F1 !important;
color: #333 !important;
}
Apply styles to the date that has an event:
.monthview-primary-with-event, .calendar-event-inner{
background-color: #1a92d0!important;
}
Disable all the borders in the calendar:
td, th {
border: 0 !important;
}
Final calendar after applying the styles:
HTML
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"
allDayLabel="All Day" startHour="9" endHour="20">
</calendar>

I had the same issue and a solution is related to encapsulation as stated in other answer.
Styling not applying to child component
try update your component:
#Component({
...
encapsulation: ViewEncapsulation.None // <------
})
export class xxComponent{
You can then apply the style based on the child class, eg.
.scss:
.monthview-container {
...;
}

The best way is to use Template Customization given in the plugin.
https://github.com/twinssbc/Ionic2-Calendar/blob/v6/README.md#Template Customization
If that is diffcult in your case. Then add a class to calender tag in html. And get all the child elements in css using Child or descendent combinator. Css Combinator

Although I'm not sure about the reason for this, the solution in my case seems to be using the global stylesheet (without any attribute selector in brackets) instead of the module specific one. It's not ideal, but it works I guess!

With depp
::ng-deep {
.monthview-selected {
background-color: blue !important;
color: white !important;
border-radius: 50%;
}
}

How to Stop Overriding of Bootstrap Css Styles

Problem
I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.
I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.
How can I stop my own styles from being overwritten?

I didn't understand your question fully, but here's what I understood:
1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.
Well, from the first question, you can:
-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:
#foo{
color: black;
}
#foo .bar{
color: white;
}
#foo .bar>li{
margin: 10px;
}
-Add a '!important' after the affected classes (Not recommended at all).
For the second matter, you could:
- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)

Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:
.darkdiv {
color: #fff;
background-color: #000;
}
and then a stylesheet with:
.darkdiv {
color: #888;
}
Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!

gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps

Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.

use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.

If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/

well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/

div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

CKEditor - Reflect styles, also those with complex selectors

I use config.ContentsCss to load the live site's styles into the editor:
config.contentsCss = ['../css/reset.css','../css/screen.css'];
But, many elements have more complex selectors, such as #content h2, and since the editor handles only elements inside <div id="content"> »» WHAT THE EDITOR SEES «« </div>
Example - H2 elements:
Inside screen.css I have this selector:
#content h2 { color: #76828A !important; text-decoration: none !important; }
In the live page it does show the element correctly, but since the editor loads only the text inside #content, it doesn't being shown correctly.

For reference, I replied to the question when posted in the CKEditor forums: http://cksource.com/forums/viewtopic.php?f=6&t=25962